динамически поиск сНа базы по входному значению

Question

У меня есть HTML, как показано ниже:

<input type='search' name='con_msg_srch' placeholder='Search Contact'/> 
<div class='contactlist'> 
    <span class='_webnn'>James Oduro</span> 
</div> 
<div class='contactlist'> 
    <span class='_webnn'>John Doe</span> 
</div> 
<div class='contactlist'> 
    <span class='_webnn'>Opoku Elvis</span> 
</div> 

Я написал функцию поиска для конкретного контакта в ContactList контакта, innerHTML его пролетных дети соответствует значению вход поиска.

Как я могу изменить RegExp сделать следующее:

1. Заменить двойной пробел между значением поискового ввода
2. состоянии соответствовать чувствительности к регистру от Aa-Zz
3. Должна быть в состоянии соответствовать, если пользователь вводит последнее имя или первое имя

У меня действительно мало знаний в RegExpression thats w гип мне нужна помощь

JQuery:

$('input[name="con_msg_srch"]').keyup(function(){ 
    var value = $.trim($(this).val()); 
    var exp = new RegExp('^' + value, 'i'); 

    $('.contactlist').each(function() { 
     var isMatch = exp.test($('._webnn', this).text()); 
     $(this).toggle(isMatch); 
    }); 

}); 

Спасибо.

Answer 1

Попробуйте это.

$('input[name="con_msg_srch"]').keyup(function(){ 
    var value = $.trim($(this).val()); 
    var value = value.replace(/ +/g, ' ') 
    var exp = new RegExp(value, 'i'); 

    $('.contactlist').each(function() { 
     var isMatch = exp.test($('._webnn', this).text()); 
     $(this).toggle(isMatch); 
    }); 

}); 

Answer 2

Вы должны поместить innerText диапазона также как значение атрибута в диапазон, как показано ниже.

<div class='contactlist'> 
    <span class='_webnn' data='James Oduro'>James Oduro</span> 
</div> 
<div class='contactlist'> 
    <span class='_webnn' data='John Doe'>John Doe</span> 
</div> 
<div class='contactlist'> 
    <span class='_webnn' data='Opoku Elvis'>Opoku Elvis</span> 
</div> 

Вместо поиска на основе содержимого HTML теперь вы можете выполнять поиск по диапазону на основе значения атрибута «данные». Это упростит вашу логику поиска.

Нет необходимости иметь имя атрибута «данные». Вы можете создать атрибут с любым именем для HTML-тега.

Надеюсь, это поможет вам решить вашу проблему.