Making a HTML list searchable

Here's 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: link

Explanation:

I created a bookmark function that searches a given element for a word (set of letters). When it finds it wraps them with a <span> with a CSS class that changes the color to red. Notice that at the beginning I make el.innerHTML = el.innerText; , this is to clear the text of <span> s previous.

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

A form other than the above that can help is to use the element datalist of HTML5 .

More information Datalist - MDN

Since you have a pre-defined list of movies and the element works based on that you can do it like this:

OBS: As you type the name, it displays only the movies with the terms you entered. One advice is to create the search with the same terms from the list quoted 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

NOTE: Remember to apply the same value of the LIST attribute of the input in the% datalist%.

If you have the links in a JSON for example or can import them from the bank, you can use 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
});
});

You can still use a multi-word Autocomplete , see this link where you can see how to use Autocomplete with multiple words: Multitiple Autocomplete .

When I need to do this, I use the HTML 5 Datalist. For example, I get information from a table (ex: categories) and I make a foreach inside it. Below is a normal 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>