Search for content within tag parameters

Question

Search for content within tag parameters

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I'm creating a search bar where the user goes typing and is filtering the content of <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 is working as I need it, but I want to put content inside the <a> tags 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 typed Rio de Janeiro will find Content 2

javascript html jquery

asked by anonymous 28.12.2016 / 14:09

2 answers

1

In this case you need to change the logic to:

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

$(this).find('a') fetches 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><inputonKeyUp="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>

28.12.2016 / 14:15

How to update $ scope.items after push execution? Help with Java exercise

score 1 · Accepted Answer

Only change $(this).text() to:

$(this).html()

It looks 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><ulid="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">