Hi
http://www.aspsnippets.com/Articles/Filter-and-Search-ASP.Net-DropDownList-items-using-JavaScript.aspx
I am using this functionality in my project and it is working very fine but i am facing very strange issue while using this.
The above functionality is not working when we place dropdownlist and textbox inside updatePanel and ModalPopupExtender
The .aspx page where i am using ModalpopupExtender and UpdatePanel for DropDownList and Textbox is below
<%-- *************************** MODAL POPUP EXTENDER ***************************************************** --%>
<asp:HiddenField ID="HiddenField3" runat="server" />
<asp:HiddenField ID="HiddenField4" runat="server" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Div6" TargetControlID="HiddenField3"
BackgroundCssClass="modalBackground" CancelControlID="bclosemodalpopup" >
</cc1:ModalPopupExtender>
<%-- *************************** MODAL POPUP ***************************************************** --%>
<div ID="Div6" runat="server" class="modalPopup" align="center" style = "display:none; overflow:scroll;">
<br />
<asp:Button ID="button" runat="server"
OnClick="button_Click" style="display:none;"/>
<asp:UpdatePanel ID="UpdatePanel1" ChildrenAsTriggers = "true" UpdateMode="conditional" runat ="server" >
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" onkeyup = "FilterItems(this.value)" CausesValidation="true"></asp:TextBox><br />
<asp:DropDownList Width="150px" ID="DropDownList1" runat="server"
DataSourceID="sdcEnglishAuthor" DataTextField="AuthorName" DataValueField="id"/>
<%-- <cc1:ListSearchExtender ID="ListSearchExtender2" runat="server" TargetControlID="DropDownList1"/>
--%>
<asp:Label ID = "label12222" runat="server"></asp:Label>
<asp:Button ID="bclosemodalpopup" runat="server" Text="close" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="button" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
The above code is not working with UpdatePanel but it is working if we remove DropdownList and Textbox from updatepanel.
The javascript code which i am using is below
<script type = "text/javascript">
var ddlText, ddlValue, ddl, lblMesg;
function CacheItems() {
ddlText = new Array();
ddlValue = new Array();
ddl = document.getElementById("<%=DropDownList1.ClientID %>");
lblMesg = document.getElementById("<%=label12222.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) {
//alert("hello");
var button = document.getElementById('<%= button.ClientID %>');
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.", "");
}
//__doPostBack("<%=UpdatePanel1.ClientID %>", "");
//__doPostBack("<%= button.ClientID %>", "");
}
function AddItem(text, value) {
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
ddl.options.add(opt);
}
</script>
Please help on this