узкий список при вводе ключевого слова javascript

#javascript

#javascript

Вопрос:

У меня есть список ссылок:

 <p>Use our search bar to narrow the list.</p>
<input id="sitemap-search" placeholder="Type to narrow list"><br>

<a class="sitemap" href="/49/brown-zircon-gemstones/s/1/round">ROUND BROWN ZIRCON GEMSTONES</a><br>
<a class="sitemap" href="/49/brown-zircon-gemstones/s/2/cushion">CUSHION BROWN ZIRCON GEMSTONES</a><br>
<a class="sitemap" href="/49/brown-zircon-gemstones/s/3/oval">OVAL BROWN ZIRCON GEMSTONES</a><br>
<a class="sitemap" href="/49/brown-zircon-gemstones/s/4/emerald-cut">EMERALD-CUT BROWN ZIRCON GEMSTONES</a><br>
 

и немного javascript:

 $('#sitemap-search').on('keyup',function(){
  var keys = $(this).val();
  $.each($('.sitemap'),function(i,item){
    console.log($(item).text());
    if(!keys.toUpperCase().indexOf( $(item).text() )){
      $(item).hide();
    } else {
      $(item).show();
    }
  });
});
 

Чего я пытаюсь добиться, так это сузить список ссылок на основе ввода ключевых слов.

поэтому, если вы введете cu, он должен скрыть две другие ссылки

Кто-нибудь хочет мне помочь? Спасибо!

Комментарии:

1. Если вы введете cu, то увидите, что в two — emerald-cut тоже есть эти буквы.

2. круто, пропустил это мимо ушей.

Ответ №1:

Получил его с:

 $('#sitemap-search').on('keyup',function(){
  var keys = $(this).val();
  $.each($('.sitemap'),function(i,item){
    if($(item).text().search( keys.toUpperCase() ) > -1){
      $(item).show();
    } else {
      $(item).hide();
    }
  });
});