javascript - 使用 jQuery 在每次输入按键时搜索列表项并隐藏其他项

Question

我有列表项的代码，我想使用文本框搜索项目我该如何执行:-

Pricerange.Append("<ul>");

for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
    Pricerange.Append(
        "<li><span class='pull-left'><a href='default.aspx?Price=" + 
        ds.Tables[0].Rows[i]["Max_id"] + "' >" + ds.Tables[0].Rows[i]["Max_Price"] + 
        "</a></span> <span class='counter-pro pull-right'>12</span></li>");
}

Pricerange.Append("</ul>");
divpricerange.InnerHtml = Pricerange.ToString();

See This Image - 在优化搜索的左侧，我想执行自动完成操作并隐藏其他列表项。

Answer 1

您可以使用 jQuery :contains 选择器来搜索列表，然后根据搜索结果显示/隐藏列表项。

这里是一个简短的片段，可以给你一个想法:

演示 fiddle :http://jsfiddle.net/mwdune35/1/

/* jQuery code to search and reveal */

$("#txt").on("keyup", function() {
    var srchTerm = $(this).val(), 
        $rows = $("#lst").children("li");
    if (srchTerm.length > 0) {
        $rows.stop().hide(); 
        $("#lst").find("li:contains('" + srchTerm + "')").stop().show();
    } else {
        $rows.stop().show();
    }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Your HTML -->
<input id="txt" type="text" />
<br />
<ul id="lst">
    <li><a href="#">JM Aroma</a></li>
    <li><a href="#">Red Square Bonanza</a></li>
    <li><a href="#">Skylabs Special</a></li>
    <li><a href="#">Society Someplace</a></li>
    <li><a href="#">Anywhere</a></li>
    <li><a href="#">Everywhere</a></li>
    <li><a href="#">Nowhere</a></li>
    <li><a href="#">Somewhere</a></li>
</ul>