How to make an HTML list searchable

Question

I want to put a search on the page, similar to the CTRL+F browser. I have a list of links and this search would only point to this list. Follow a print for better understanding.

Answer 1

Here is a suggestion:

function marcador(letras, el) {
    el.innerHTML = el.innerText;
    var rgxp = new RegExp(letras, 'g');
    var span = '<span class="marcador">' + letras + '</span>';
    el.innerHTML = el.innerHTML.replace(rgxp, span);
}

var input = document.getElementById('busca');
var texto = document.getElementById('texto');
var divs = texto.children;
input.onkeyup = function () {
    for (var i = 0; i < divs.length; i++){
        marcador(this.value, divs[i]);
    }
}

.marcador {
    color: red;
}

<div>Procurar:
    <input id="busca" type="text" />
</div>
<div id="texto">
    <div>- A língua das Mariposas</div>
    <div>- A última tempestade</div>
    <div>- Agonia e Êxtase</div>
    <div>- Arquitetura da destruição</div>
</div>

jsFiddle: http://jsfiddle.net/otrnsqvy/1/

Explanation:

I have created a marker function that searches a given element for a word (set of letters). When it finds it it surrounds it with a <span> with a CSS class that changes the color to red. Notice that at first I do el.innerHTML = el.innerText;, This is to clear the text of <span>s previous.

I put it together too input.onkeyup = function () {. This causes a function to be run every time a key is released. In this function I run all elements div children of #texto and call the function marcador(this.value, divs[i]);. The this.value gives the input value (letters/word).

Answer 2

A way beyond the above that can help is to make use of the element datalist of HTML5.

More information Datalist - MDN

Since you have a predefined movie list and the element works on that basis you can do so:

OBS: As you type the name, it displays only the movies with the typed terms. A piece of advice is you create the search with the same terms as the list cited in your example image.

.wrapper {  
  display: inline-block;
  width: 200px;
  border: 1px solid #CCC;
  font-family: "Tahoma", sans-serif;
}

.wrapper span {
  display: block;
  color: #CCC;
  padding: 10px;
  border-bottom: 1px solid #CCC;
}

.search {
  margin: 10px;
  padding: 5px;
  display: inline-block;
  border: 1px solid #CCC;
}

.search-input {
  border: 0;
}

    <div class="wrapper">
      <span>Pesquisa</span>

      <div class="search">
        <input class="search-input" list="movies" placeholder="Pesquisa..."><i class="fa fa-search"></i>
      </div>

      <datalist id="movies">
         <option value="A Era do Gelo">A Era do Gelo</option>
         <option value="O Lobo de Wall Street">O Lobo de Wall Street</option>
         <option value="12 Horas">12 Horas</option>
         <option value="12 Rounds">12 Rounds</option>
         <option value="A Dama de ferro">A Dama de ferro</option>
         <option value="2 Filhos de Francisco">2 Filhos de Francisco</option>
         <option value="Exterminador do Futuro">Exterminador do Futuro</option>
         <option value="21 Gramas">21 Gramas</option>
         <option value="1408">1408</option>
      </datalist>
    </div>

JSBIN: Datalist

OBS: Remember to apply the same attribute value LIST of input in ID of the datalist.

Answer 3

I use the HTML 5 Datalist when I need to do this. For example, I take information from a table (e.g., categories) and do a foreach inside it. Below is a standard HTML-only example: <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

Answer 4

If you have the links in a JSON for example or can import them from the bank, you can use the JQuery Autocomplete:

$(function() {
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#tags" ).autocomplete({
  source: availableTags
});
});

It is still possible to use a Autocomplete of multiple words, see this link where it is shown how to use the Autocomplete multi-word: Multiple Autocomplete.