var InputSort = $('input#sort'); var minlen = 2; InputSort.bind('keyup',function(){ if(InputSort.val().length>=minlen) { dosearch(); } }); function dosearch() { var term = InputSort.val(); $('.light').each(function(){ $(this).after($(this).html()).remove(); }); t = ''; $('.sorting li').each(function(){ $(this).html($(this).html().replace(new RegExp(term, 'ig'), '<span class="light">$&</span>')); }); }; 
 ul {padding: 5px;} li {list-style: none; color: #333;} .light {color: #f00;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <input type="text" placeholder="Поиск" id="sort"> <ul class="sorting"> <li>Яблоко</li> <li>Апельсин</li> <li>Лимон</li> <li>Дыня</li> <li>Арбуз</li> </ul>

At the moment, this code is looking for matches in words and selects them.
How to realize that the selection will go to <li> ?

    2 answers 2

     const InputSort = document.getElementById('sort'); const minlen = 2; InputSort.addEventListener('keyup', dosearch); function dosearch() { const term = InputSort.value.toLowerCase(); if(term.length < minlen) return true; [...document.querySelectorAll('.sorting li')].forEach(li => { if(li.innerText.toLowerCase().includes(term)) li.classList.add('light'); else li.classList.remove('light'); }); }; 
     ul {padding: 5px;} li {list-style: none; color: #333;} .light {color: #f00;} 
     <input type="text" placeholder="Поиск" id="sort"> <ul class="sorting"> <li>Яблоко</li> <li>Апельсин</li> <li>Лимон</li> <li>Дыня</li> <li>Арбуз</li> </ul>

    • Only jquery tag, why write the answer on pure js? - teran
    • @teran Why write on jQuery what you can write on what jQuery is written on? - Darth
    • With this logic, any js libraries should not be used, because all of this is written in js. And any languages ​​should be replaced with an assembler. - teran
    • @teran With your logic, you cannot go to the store without a banknote-counting machine. Libraries should be used where needed. And jQuery is needed only for one thing - so that student Vasya can earn a thousand rubles by downloading the plugin on the Internet and putting it on Nikolai Georgievich’s website. Well, even for a number of interesting things - so that the site works more slowly, so that there are more bugs, so that it weighs more, and ultimately - so that users suffer more often. - Darth
    • Your opinion about the use of jquery in the development in this context is not important. It is important that the author of the question asked about the implementation on jquery. Questions on pkhp, you answer with the code on c ++? Yes, he can generally rewrite js to jquery for practice. But on the other hand, a qualitative response using the library will also help him to better learn the language itself and the functionality of both the language and the libraries. - teran

    See, you use code

     $('.sorting li').each(function(){ $(this).html($(this).html().replace(new RegExp(term, 'ig'), '<span class="light">$&</span>')); });

    to search for items, and the $ .each () call to handle each, each one is a ListItem.

    Slightly change this code:

     $('.sorting li').each(function(){ if ($(this).html().test(new RegExp(term, 'ig'))) { // В тексте элемента списка есть то, что мы ищем, // значит просто помечаем этот элемент списка как выделенный // и идем пить пиво, потому что сегодня пятница $(this).addClass("light"); } });