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选择器搜索列表，然后根据搜索结果显示/隐藏列表项。

这是一个快速摘要，可以给你一个想法：

演示小提琴：http://jsfiddle.net/mwdune35/1/

＆＃13;

/* 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();
    }   
});

＆＃13;

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

＆＃13;

Answer 2

请检查此post

它使用Tables而不是list，但你可以使用它。

$.each($("#table tbody").find("tr"), function() {
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
           $(this).hide();
        else
             $(this).show();                
    })

Answer 3

通过这种方式执行此脚本将感谢@ abhitalks提供有价值的建议。

$(document).ready(function () {
        $("#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();
            }
        });
        });

使用jQuery按下每个输入键上的列表项并隐藏其他项

3 个答案: