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

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

1 голос
/ 31 января 2011

У меня есть окно поиска. Я использую jQuery и keyup для фильтрации повторяющихся div.

Каждый div выглядит так: 

<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

Новая проблема: я заставил divs show () показать, как я хочу. Но: содержит не работает точно.

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

Что не так?

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

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

Ответы [ 2 ]

1 голос
/ 31 января 2011

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

Попробуйте: 

<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>
0 голосов
/ 31 января 2011

Ваш селектор 

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

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

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

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

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

...