javascript – Search for content within tag parameters

Question:

I'm creating a search bar where the user types and filters the content of the <li> in real time. I have a similar code:

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>

This one is working as I need it, but I want to put some content inside the <a> tags and it also be able to filter through them. So my HTML would look something like this:

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>

That is, if the user also types Rio de Janeiro will find Content 2

Answer:

Just replace $(this).text() with:

$(this).html()

Stays like this:

$('#search').keyup(function() {
    filterMap(this);
});

function filterMap(element) {
  var value = $(element).val().toLowerCase();

  $("#list-search-filter-map > li").each(function() {
    if ($(this).html().toLowerCase().search(value) > -1) {
      $(this).show();
    }
    else {
      $(this).hide();
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="list-search-filter-map">
    <li><a href="" data-cidade="São Paulo" data-estado="SP">Conteudo 1</a></li>
    <li><a href="" data-cidade="Rio de Janeiro" data-estado="RJ">Conteudo 2</a></li>
    <li><a href="" data-cidade="Curitiba" data-estado="PR">Conteudo 3</a></li>
</ul>
<input type="text" id="search">
Scroll to Top