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 
$('#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 回答
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();
        }
    });
}

jsFiddle

于 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 回答