Da Vishu Code: Type and Search in DropDownList in ASP.NET : Using Ajax and JavaScript

Copy following JavaScript code and paste in <head></head> tag.

<script type = "text/javascript">
var ddlItemText //array for ddl text items
, ddlValue //array for ddl item values
, ddlSrchObj; //ddl object

//init op onload
function initItems() {
ddlItemText = new Array();
ddlValue = new Array();
ddlSrchObj = document.getElementById("<%=ddlsSrchInJS.ClientID %>");

//        Get ddl items and values onblur load
for (var i = 0; i < ddlSrchObj.options.length; i++) {
ddlItemText[ddlItemText.length] = ddlSrchObj.options[i].text;
ddlValue[ddlValue.length] = ddlSrchObj.options[i].value;
}
}
window.onload = initItems;

function SearchItem(value) {
ddlSrchObj.options.length = 0;
for (var i = 0; i < ddlItemText.length; i++) {
if (ddlItemText[i].toLowerCase().indexOf(value) != -1) {//if found
AddOption(ddlItemText[i], ddlValue[i]);
}
}
if (ddlSrchObj.options.length == 0) {//if not found
AddOption("No items found.", "");
}
}
// if found create option to show in ddl
function AddOption(text, value) {
var option = document.createElement("option");
option.text = text;
option.value = value;
ddlSrchObj.options.add(option);
}
</script>

Copy following line and paste it just after <%@ Page directive.
```
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
```
You need to add reference of Ajaxtoolkit in your webapplication if not added.
Copy paste following code in <form></form> tag

<table>
<tr>
<td>
Dropdown Dropdown Search using Javascript 
</td>
<td>

<asp:TextBox ID="txtSearch" runat="server"
onkeyup = "SearchItem(this.value)">
</asp:TextBox>
<br />
<asp:DropDownList ID="ddlsSrchInJS" runat="server" Height="22px" Width="157px" >
</asp:DropDownList>

</td>
</tr>
<tr>
<td >

</td>
<td >
&nbsp;</td>
</tr>
<tr>
<td>
Dropdown Search using AJAX
</td>
<td>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:DropDownList ID="ddlAjaxSearch" runat="server" Height="22px" Width="156px">
</asp:DropDownList>
<asp:ListSearchExtender ID="ListSearchExtender1" 
TargetControlID="ddlAjaxSearch"
QueryPattern="Contains" 
runat="server">
</asp:ListSearchExtender>

</td>
</tr>
</table>
</form>

Following is code to add items to both dropdownlists. I’ve added 10 items and assigned values to items of dropdown to be used with javascript. In this case for dropdown to be used with ajax does not require values for items. I’ve written it on page load, you may do it in anyway you prefer.

string[] strArr = new string[10] { "vishal", "akshay", "bandya", "dilip"
, "gazala", "minal", "ninad", "kunal"
, "ajay", "rizwan" };
int i = 1;
foreach(string s in strArr)
{
ddlAjaxSearch.Items.Add((new ListItem(s)));
ddlsSrchInJS.Items.Add((new ListItem(s)));
ddlsSrchInJS.Items[ddlsSrchInJS.Items.Count - 1].Value = Convert.ToString(++i);
}

QueryPattern="Contains" attribute is necessary, else by default QueryPattern is “StartsWith”.
ListSearchExtender works same with ListBox too.

Hope this helps you. Suggestions if any are welcome..

Tags: Search in DropDownList ,AJAX

Da Vishu Code

Pages

Friday, October 8, 2010

Type and Search in DropDownList in ASP.NET : Using Ajax and JavaScript

0 comments:

Post a Comment