Estou criando uma barra de busca aonde o usuário vai digitando e vai filtrando em tempo real o conteúdo das <li>
. Tenho um código parecido:
HTML
<ul id="list-search-filter-map">
<li><a href="">Conteudo 1</li>
<li><a href="">Conteudo 2</li>
<li><a href="">Conteudo 3</li>
</ul>
jQuery
<script language="javascript" type="text/javascript">
function filterMap(element) {
var value = $(element).val().toLowerCase();
$("#list-search-filter-map > li").each(function() {
if ($(this).text().toLowerCase().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
Esse está funcionando como eu preciso, mas quero colocar um conteúdo dentro das tags <a>
e ele também conseguir filtrar por eles. Então meu HTML ficaria mais ou menos assim:
HTML
<ul id="list-search-filter-map">
<li><a href="" data-cidade="São Paulo" data-estado="SP">Conteudo 1</li>
<li><a href="" data-cidade="Rio de Janeiro" data-estado="RJ">Conteudo 2</li>
<li><a href="" data-cidade="Curitiba" data-estado="PR">Conteudo 3</li>
</ul>
Ou seja, se o usuário também digitar Rio de Janeiro
achará o Conteúdo 2