Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

This example shows how to select ListItems in the ListBox based from the TextBox values using JavaScript.

Here’s the code block below.

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
    <title>Demo</title>
</head>

<script type="text/javascript" language="javascript"> 

    function SearchList()
    {
        var l =  document.getElementById('<%= ListBox1.ClientID %>');
        var tb = document.getElementById('<%= TextBox1.ClientID %>');
        if(tb.value == ""){
            ClearSelection(l);
        }
        else{
            for (var i=0; i < l.options.length; i++){
                if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase()))
                {
                    l.options[i].selected = true;
                    return false;
                }
                else
                {
                    ClearSelection(l);
                }
            }
        }
    }

    function ClearSelection(lb){
        lb.selectedIndex = -1;
    }

</script>
<body> 
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" onkeyup="return SearchList();"/><br />
    <asp:ListBox ID="ListBox1" runat="server" Height="150px" Width="250px">
    <asp:ListItem>Vincent</asp:ListItem>
    <asp:ListItem>Jennifer</asp:ListItem>
    <asp:ListItem>Shynne</asp:ListItem>
    <asp:ListItem>Christian</asp:ListItem>
    <asp:ListItem>Helen</asp:ListItem>
    <asp:ListItem>Vladi</asp:ListItem>
    <asp:ListItem>Bee</asp:ListItem>
    <asp:ListItem>Jerome</asp:ListItem>
    <asp:ListItem>Vinz</asp:ListItem>
    <asp:ListItem>Churchill</asp:ListItem>
    <asp:ListItem>Rod</asp:ListItem>
    <asp:ListItem>Mark</asp:ListItem>
    </asp:ListBox>
    </form>
</body>
</html>

The JavaScript function basically searches the ListBox items and find the items based from the value of the TextBox that was entered. If a keyword exist from the list then it will automatically select the ListItems in the ListBox, but if the keyword does not exist then it will clear the ListBox selection.

See the output below when you run it on the page

 

That's it!

 

Technorati Tags: ,,

Posted on Wednesday, February 25, 2009 8:14 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: Search ListBox items using JavaScript

# re: Search ListBox items using JavaScript
Requesting Gravatar...
hey!how about an implementation using PHP?Thanks.
Left by Mark on Mar 03, 2009 1:00 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
hey!how about an implementation using PHP?Thanks.
Left by Mark on Mar 03, 2009 1:00 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
hey how about an implementation using php???????
Left by sachit on May 30, 2009 4:06 AM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
hey u dont have send it please send it using php to filter the listbox by textbox
Left by sachit on May 30, 2009 10:12 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
hey your code is good but doesnot work fine or it becomes too slow for a web when there are bulky data?????Any help would be nice you could tell in asp ????
Left by sachit on May 31, 2009 9:58 PM

# Implementing better algorithm
Requesting Gravatar...
hi, I have the next issue.

I have like 800 data in a listbox alphabeticly ordered.

one of the items is: 'Construcotre Emin xxx'
and another is: 'Constructora Comin xxx'

between those data are like 50 another items, so I write in the textbox 'Comin' and the item selected is 'Constructore Emin xxx' so I never reach 'Constructora Comin xxx'

Possible Solutions:
Is there a way to remove Items that don't match the search instead of searching one by one?
Is there a way to implementing a next button to the search?
Left by Gabriel on Jul 13, 2009 9:48 AM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
VERY USEFUL..been looking for this..nothing works until i found this.. THANKS SO MUCH
Left by Kiara on Aug 30, 2009 11:21 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
Excellent !!!!
Left by kiran on Nov 04, 2009 2:11 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
Thanks for the script! Exactly what I was looking for!
Left by joe on Mar 26, 2010 9:25 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
Can this be done without textbox? Like ajax listboxsearchextender?
Left by Ramesh Patel on Jun 08, 2010 8:12 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
Hi,

Above JS doesn't support with "?,(,)" Sp charactors.
E.g if i am entering in Textbox ="Bank (Srv@test)" then it gives error at Textbox ="(Srv" .

Ple do the needful.
Left by Prashant on Jul 20, 2010 1:21 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
Thank you very much its working in Asp.net application.. I am very thankful to u..
Left by Nagrajuna on Nov 03, 2010 10:07 PM

# re: Search ListBox items using JavaScript
Requesting Gravatar...
Thanks!
Just what i was looking for!
Left by Vincent on Nov 05, 2012 4:58 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net