Thursday, February 24, 2011

Filtering or Searching in Listbox Item Using JavaScript

Normally you have a requirement that user want to search or filtering record in a list box according to what he write in textbox.So in my pervious posted Search ListBox items using JavaScript.I explained how to search in listbox but there is one restriction when user want to search, it will select only one record and user can not see the other records related to searching criteria.So in this post I explain how to implement this thing if you have that kind or requirement.

First you write JavaScript code on html page.

 
<script type="text/javascript" language="javascript">
var ddlText, ddlValue, ddl, lblMesg;
function CacheItems() {

ddlText = new Array();
ddlValue = new Array();
ddl = document.getElementById("<%=ListBox1.ClientID %>");
lblMesg = document.getElementById("<%=lblMessage.ClientID%>");
for (var i = 0; i < ddl.options.length; i++) {
ddlText[ddlText.length] = ddl.options[i].text;
ddlValue[ddlValue.length] = ddl.options[i].value;
}
}
window.onload = CacheItems;

function FilterItems(value) {
ddl.options.length = 0;

for (var i = 0; i < ddlText.length; i++) {

if (ddlText[i].toLowerCase().indexOf(value) != -1) {

AddItem(ddlText[i], ddlValue[i]);

}

}

lblMesg.innerHTML = ddl.options.length + " items found.";

if (ddl.options.length == 0) {

AddItem("No items found.", "");

}

}



function AddItem(text, value) {

var opt = document.createElement("option");

opt.text = text;

opt.value = value;

ddl.options.add(opt);

}
</script>



 



The above three JavaScript methods take care of the Filtering and Searching process. The significance of the these methods is described below


1. CacheItems


This method is called on the window onload event. The job of this method is to populate text and value arrays that will be used to cache the List box items.


2. FilterItems


This method is called when keyup event fires in the Search TextBox. This method searches for the string segment and filters the Listbox items.


3. AddItem


This method as the name suggests adds a new item to the Listbox


<body> 

<form id="form1" runat="server">

<asp:TextBox ID="TextBox1" runat="server" onkeyup="FilterItems(this.value)"><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>
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</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.While the label will display the status message to the user

3 comments:

  1. hese kind of courses are very important to the society that we live in if these kind of courses were start before the situation was much batter




    Web Design

    ReplyDelete
  2. hello sir.first of all excellent article i should say. thanks a lot for the info. However my requirement is that i search the listbox and assign the selected elements to another treeview. I select an element and i assign it but if i type the same name again in textbox it is showing duplicated value. As per my understanding this is because the cache items method is holding older state of listbox. How to update the cache and listbox items because it is persisting the onload listbox.? Thanks in advance.

    ReplyDelete

PDF Arabic watermark using MVC and iTextSharp

PDF full page Arabic watermark using MVC and iTextSharp Download :  Source Code Most of the time we have requirement to  gen...