Question

我有一个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 ，就像输入名字一样......

Answer 1

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

Answer 2

我建议使用经过试用和测试的自动完成插件，例如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/

Answer 3

$(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

如何使用jQuery创建输入搜索词

3 个答案: