ul{
list-style: none;
}
<input type="text" placeholder="Pesquise aqui">
<ul>
<li>Abacate</li>
<li>Banana</li>
<li>Cenoura</li>
<li>Tomate</li>
</ul>
ul{
list-style: none;
}
<input type="text" placeholder="Pesquise aqui">
<ul>
<li>Abacate</li>
<li>Banana</li>
<li>Cenoura</li>
<li>Tomate</li>
</ul>
There it is.
The logic is simple: every time a key is pressed within input
, the Javascript code generates a regular expression with the value of input
, which expression is compared to the text of each list item. Items whose text does not correspond to it receive display: none;
in their css, so they are hidden. Those that correspond, are with display: block;
Note: The script only works to find items that