Search content within tag parameters

Question

I’m creating a search bar where the user type and filter in real time the content of <li>. 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 is working as I need, but I want to put some content inside the tags <a> and it can also 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 type Rio de Janeiro will find the Content2

Answer 1

Then you need to change the logic to:

if ($(this).find('a').data('cidade').toLowerCase().search(value) > -1) {

• $(this).find('a') gets the element <a>
• .data('cidade') will fetch the value of this field data-

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

  $("#list-search-filter-map > li").each(function() {
    if ($(this).find('a').data('cidade').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>
<input onKeyUp="filterMap(this)" />

<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>

Answer 2

Just change the $(this).text() for:

$(this).html()

Stay 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">