jQuery - Использование: содержит для мгновенного поиска с вложенными divs/classes?

У меня есть окно поиска. Я использую jQuery и keyup для фильтрации повторяющихся div.jQuery - Использование: содержит для мгновенного поиска с вложенными divs/classes?

Каждый ДИВ выглядит следующим образом:

<div class="searchCell" id="searchCell' . $id . '">'; 
    <div class="friendName"> 
     // someNameOutputWithPHP. 
     </div> 
</div>

Теперь я хочу, чтобы фильтровать на основе текста названия. Если someNameOutputWithPHP содержит поисковый запрос, весь searchCell должен показывать(). Если это не так, весь searchCell должен скрывать().

Это не работает, хотя:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#searchbox").keyup(function() { 
     var searchValue = $(this).val(); 
     if(searchValue === "") { 
      $(".searchCell").show(); 
      return; 
     } 
     $(".searchCell").hide(); 
     $(".searchCell > .friendName:contains(" + searchValue + ")").show(); 
    }); 
}); 
</script>

EDIT

Новая проблема: я получил дивы шоу(), чтобы показать, как я хочу. Но: contains не работает точно.

Например: одно из имен - это Райан. Когда я ищу «Райана», я ничего не получаю. Но когда я ищу «янь», я получаю Ryan div.

Что случилось?

Вот: содержит код:

 $(".friendName:contains(" + searchValue + ")").parent().show();

источник

2011-01-31 Miguel K.

Сторона примечания: 'keyup', вероятно, не является тем событием, которое вы хотите. Он срабатывает только при нажатии клавиши, в отличие от повтора клавиши (например, нажатия и удерживания клавиши). Вы можете использовать 'keypress', но это не заставит людей перешагнуть или вставить в поле с помощью мыши (щелкните правой кнопкой мыши, выберите« Вставить »из меню, на большинстве ОС). К сожалению, единственный * надежный способ обнаружения изменений в поле - это опросить его (просто обязательно начните опрос на «focus» и остановитесь на 'blur', чтобы вы не делали опрос без необходимости). –

Хорошо. Теперь, есть ли какой-то шаблон, который я могу использовать для исправления проблемы поиска в моем редактировании? –

Это потому, что вы скрываете в .searchCell, а затем показывая своих детей .friendName дивы, которые хотя получить дисплей свойство не будет отображаться, поскольку родитель скрыта.

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

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#searchbox").keyup(function() { 
     var searchValue = $(this).val(); 
     if(searchValue === "") { 
      $(".searchCell").show(); 
      return; 
     } 
     $(".searchCell").hide(); 
     //$(".searchCell:has(.friendName:contains(" + searchValue + "))").show(); 
     // OR 
     //$(".friendName:contains(" + searchValue + ")").parents(".searchCell").show(); 
     // OR 
      $(".friendName:contains(" + searchValue + ")").parent().show(); // If .searchCell is always a direct parent 
    }); 
}); 
</script>

источник

2011-01-31 07:25:12 Chandu

кажется мне неэффективным (используя ': has()' + ': contains()' pseudos в одном селекторе). OP должен просто вызывать '.parent()' before '.show()' в своем текущем заявлении и быть в порядке. – jAndy

Это тоже не работает. –

Раньше была опечатка. Исправил его (прокомментировал это), а также добавил другой способ навигации по иерархии. – Chandu

Ваш селектор

$(".searchCell > .friendName:contains(" + searchValue + ")")

подберет все .friendName дивы, содержащие текст из searchValue. Это работает отлично, но вам нужно указать .show() родительский элемент. Просто вызовите метод .parent() для этого:

$(".searchCell > .friendName:contains(" + searchValue + ")").parent().show();

Demo: http://jsfiddle.net/d3ays/3/

И кстати, вы HTML разметка выглядит перепутались тоже. Например, есть ; за вашим div.searchCell.

источник

2011-01-31 07:33:34 jAndy

jQuery - Использование: содержит для мгновенного поиска с вложенными divs/classes?

ответ

Смежные вопросы