CODEWITHSUNDEEP
javascriptc#jqueryasp.net
Praveen Singh
Praveen Singh

Reputation: 39

Search through list items on every input key press using jQuery and hide other item

I have code of list item , I want to search items using textbox how i can perform:-

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 - on left hand side in refine search i want to perform autocomplete action and hide other listitem.

Upvotes: 1

Views: 2237

Answers (3)

Praveen Singh
Praveen Singh

Reputation: 39

In this way this script will executed thanks @ abhitalks for valuable suggestion.. 

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

Upvotes: 0

Chris
Chris

Reputation: 639

Kindly check this post

It uses Tables instead of list, but you can play with it. 

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

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

You could use jQuery :contains selector to search the list and then show/hide list items based on the search result.

Here is a quick snippet that would give you an idea:

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

Upvotes: 3

Related Questions