Нужен поисковый фильтр фильтра javascript - PullRequest
Новая
       1

Нужен поисковый фильтр фильтра javascript

0 голосов
/ 08 сентября 2018

Todo:

  • Мне нужен фильтр окна поиска в javascript для поиска и фильтрации каждого
  • Когда я набираю слова, например, c, это показывает мне calvin, cars, cinama.
    Вот список примеров. 
<ul>
  <li><a HREF="#">KINDY</a></li>
  <li><a HREF="#">BILLY</a></li>
  <li><a HREF="#">DOB</a></li>
  <li><a HREF="#">CALVIN</a></li>
  <li><a HREF="#">ACNE</a></li>
  <li><a HREF="#">boil</a></li>
  <li><a HREF="#">cars</a></li>
  <li><a HREF="#">cinama</a></li>
  <li><a HREF="#">lamp</a></li>
</ul>

Ответы [ 3 ]

0 голосов
/ 08 сентября 2018

Попробуйте

HTML 

<ul id="MyList">
  <li><a href="#">KINDY</a></li>
  <li><a href="#">BILLY</a></li>    
  <li><a href="#">DOB</a></li>
  <li><a href="#">CALVIN</a></li>    
  <li><a href="#">ACNE</a></li>
  <li><a href="#">boil</a></li>
  <li><a href="#">cars?</a></li>
  <li><a href="#">cinama</a></li>
  <li><a href="#">lamp</a></li>
</ul>

Сценарий 

$(document).on('keyup change','#YourSearchBox',function(){
     var SearchString=$(this).val();
     var Names=$('#MyList').find('a');
     $('#MyList').empty();
     var List='';
     $.each(Names,function(i,ListName){
         if(ListName.text.toLowerCase().includes(SearchString.toLowerCase()))
         {
             List+='<li style="display:block"><a href="#">'+ListName.text+'</a></li>'
         }
         else
         {
            List+='<li style="display:none"><a href="#">'+ListName.text+'</a></li>'
         }
     });
     $('#MyList').append(List);
    });
});
0 голосов
/ 08 сентября 2018

Вы можете использовать библиотеку типа match-sorter . Он делает очень хорошую работу по этому нечеткому поиску.

Если вы не используете env для узла / es6, вы можете напрямую включить эту библиотеку в свой код, используя https://unpkg.com/match-sorter@2.3.0/dist/match-sorter.cjs.js. Включите этот JS в ваш HTML и используйте логику поиска в теге script.

0 голосов
/ 08 сентября 2018

Это то, что вы ищете, если да, то отлично работает. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>


<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Hello</a></li>
  <li><a href="#">Is</a></li>

  <li><a href="#">This</a></li>
  <li><a href="#">What</a></li>

  <li><a href="#">You</a></li>
  <li><a href="#">are</a></li>
  <li><a href="#">Looking?</a></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...