0

私はこのようなinputものulがたくさんありliます：

入力

<input type="text" placeholder="searching friends ..." id="search-friends">

これは私の友達のリストです:

<ul id="friend-list">
    <li class="on" id="1" conversation="">
        <button class="conver-link">
            <div class="friend-detail">
                <div class="friend-name"> <span>Janatan</span>

                </div>
            </div>
        </button>
    </li>
    <li class="on" id="2" conversation="">
        <button class="conver-link">
            <div class="friend-detail">
                <div class="friend-name"> <span>andy</span>

                </div>
            </div>
        </button>
    </li>
    <li class="bs" id="3" conversation="">
        <button class="conver-link">
            <div class="friend-detail">
                <div class="friend-name"> <span>Anna</span>

                </div>
            </div>
        </button>
    </li>
    <li class="bs" id="4" conversation="">
        <button class="conver-link">
            <div class="friend-detail">
                <div class="friend-name"> <span>fred</span>

                </div>
            </div>
        </button>
    </li>
    <li class="bs" id="5" conversation="">
        <button class="conver-link">
            <div class="friend-detail">
                <div class="friend-name"> <span>john</span>

                </div>
            </div>
        </button>
    </li>
    <li class="of" id="6" conversation="">
        <button class="conver-link">
            <div class="friend-detail">
                <div class="friend-name"> <span>cristian</span>

                </div>
            </div>
        </button>
    </li>
</ul>

任意の単語を入力すると、名前を入力するようなul関連するliを非表示にして表示したい.....

4

3 に答える 3

0 
$(document).ready(function () {
    $("#search-friends").keyup(function (){
        searchFriendsByPattern($("#search-friends").val());
    });
});

function searchFriendsByPattern(pattern){
    $("#friend-list").children("li").each(function () {
        var liText = $(this).find("span").text().toLowerCase();
        if (liText.indexOf(pattern.toLowerCase()) == -1){
            $(this).hide();
        }
        else{
           $(this).show();
        }
    });
}

jsフィドル

于 2013-08-22T07:53:56.333 に答える
0

のような試行錯誤済みのオートコンプリート プラグインの使用をお勧めしますが、jQuery UI Autocomplete飾り気のないアプローチが必要な場合は、これを試すことができます。

var $list = $('#friend-list');

//Hide the list items initially
$list.find('li').hide();

$('#search-friends').on('keyup', function() {
    $list.find('li').hide();

    //Select only elements that contain the query string and show it
    $list.find('li:contains("' + this.value.toLowerCase() + '")').show();
});

これが実際のデモです: http://jsfiddle.net/tfMZg/4/

于 2013-08-22T07:51:44.250 に答える
0 
$('#search-friends').on('keyup', function() {    
    $('.friend-name span').each(function(){
        if ($(this).html().indexOf($('#search-friends').val()) != -1 {
            //SHOW/HIGHLIGHT/OR WHATEVER THE li's you are looking for
        })
    });
});
于 2013-08-22T07:24:58.933 に答える