Определение блока при поиске через RegExp

372

17 марта 2018, 16:50

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>

В данный момент этот код ищет совпадения в словах и выделяет их.
Как реализовать, что выделение будет идти на <li>?

Answer 1

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>

Answer 2

Смотрите, вы используете код

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

для поиска элементов, а вызов $.each() - для обработки каждого, причем каждый - ListItem.

Чуть-чуть изменим этот код:

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