Показать div на основе текстового поиска
У меня есть текстовый входной поиск, который должен фильтровать divs на основе названия div. Вот код, который не работает:
$('.contact-name').each(function(){
var txt = $('#search-criteria').val();
$('this').find(txt).show()
});
Что я делаю неправильно?
EDIT:
Чтобы уточнить переменную txt, пользователь вводит поле ввода. Например, если txt был Cha, я бы хотел, чтобы эта строка показывала:
<div class="contact-name"><h3><a href="##">Charles Smith</a></h3></div>
Ответы
Ответ 1
попробуйте это
var txt = $('#search-criteria').val();
$('.contact-name:contains("'+txt+'")').show();
документация для: содержит() Селектор
Пример скрипта: http://jsfiddle.net/WBvTj/2/
ОБНОВЛЕНИЕ ДЕЛО INSENSITIVE:
var txt = $('#search-criteria').val();
$('.contact-name').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
скрипка Пример: http://jsfiddle.net/WBvTj/4/
Ответ 2
К счастью, jQuery имеет селектор Contains:
$('.contact-name').each(function(){
var txt = $('#search-criteria').val();
$(this).find('div:contains("'+txt+'")').show()
});
Ответ 3
Метод find
принимает параметр JQuery в качестве параметра. Я сомневаюсь, что ваш текстовый ввод search_criteria
будет содержать это. Предполагая, что он будет содержать некоторую подстроку названия DIV, попробуйте следующее:
var txt = $('#search-criteria').val();
$('.contact-name').each(function(i, e){
if($(e).attr("title").indexOf(txt)>=0) $(e).show();
});
Ответ 4
Ниже следует нечувствительность к регистру и совпадение только с текстом вначале href в div:
var pattern = "/" + $('#search-criteria').val() + "/i";
$('.contact-name').filter(function() {
return $(this 'a:first-child').html().match(pattern).length > 0;
}).show();
фильтр дает вам список элементов, которые возвращают true из этой функции в нем, чтобы применить show() к.
Возврат в функции фильтра можно читать как "для первого элемента привязки в этом элементе, взять содержимое, сопоставить его с шаблоном, и если результирующий массив содержит 1 или более результатов, верните true".
"i" в конце шаблона - это то, что дает вам нечувствительность к регистру.