Vinz' Blog

"Code, Beer and Music" ~ my way of being a programmer!
posts - 124, comments - 365, trackbacks - 0

My Links

News

Archives

Image Galleries

Search ListBox items using JavaScript

This demo describes on 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!

 

Print | posted on Wednesday, February 25, 2009 8:14 PM |

Feedback

Gravatar

# re: Search ListBox items using JavaScript

hey!how about an implementation using PHP?Thanks.
3/3/2009 1:00 PM | Mark
Gravatar

# re: Search ListBox items using JavaScript

hey!how about an implementation using PHP?Thanks.
3/3/2009 1:00 PM | Mark
Gravatar

# re: Search ListBox items using JavaScript

Hi Mark,

Sorry but I'm not familiar with PHP and besides this blog is intended for ASP.NET stuffs! :)
3/3/2009 1:32 PM | vinz
Gravatar

# re: Search ListBox items using JavaScript

hey how about an implementation using php???????
5/30/2009 4:06 AM | sachit
Gravatar

# re: Search ListBox items using JavaScript

hey u dont have send it please send it using php to filter the listbox by textbox
5/30/2009 10:12 PM | sachit
Gravatar

# re: Search ListBox items using JavaScript

To all,

As what I have posted last time.. I am Not familiar with PHP so I can't give you a sample implementation with this in PHP.. I never used it before.. also note that this blog is related to ASP.NET and Not PHP..
5/31/2009 2:15 PM | Vinz
Gravatar

# re: Search ListBox items using JavaScript

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 ????
5/31/2009 9:58 PM | sachit
Gravatar

# Implementing better algorithm

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?
7/13/2009 9:48 AM | Gabriel
Gravatar

# re: Search ListBox items using JavaScript

VERY USEFUL..been looking for this..nothing works until i found this.. THANKS SO MUCH
8/30/2009 11:21 PM | Kiara
Gravatar

# re: Search ListBox items using JavaScript

Excellent !!!!
11/4/2009 2:11 PM | kiran
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: