In this article I will explain how to solve the problem of jQuery AutoComplete not working inside ASP.Net AJAX UpdatePanel after UpdatePanel’s Asynchronous request or Partial PostBack is completed.
Cause
All jQuery plugins are applied on the Page Load event of the HTML Page or in other words document ready event which is fired when the whole page or document is rendered completely in browser. Now jQuery assigns a unique identification to all controls when applying the plugin. But when some control is inside UpdatePanel and a Partial PostBack occurs the Unique Ids assigned by jQuery is lost and hence the plugin stops working.
The Solution: Making jQuery AutoComplete work inside ASP.Net AJAX UpdatePanel
Below is the jQuery Autocomplete plugin implementation, placed inside ASP.Net AJAX UpdatePanel. The jQuery AutoComplete is applied to the ASP.Net TextBox using the SetAutoComplete JavaScript function.
An ASP.Net WebMethod is acts as a source of data to the jQuery AutoComplete plugin.
The SetAutoComplete JavaScript function is called at two places, first inside jQuery document ready event handler and second inside the ASP.Net AJAX UpdatePanel endRequest event handler.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
//On Page Load.
$(function () {
SetAutoComplete();
});
//On UpdatePanel Refresh.
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
SetAutoComplete();
}
});
};
function SetAutoComplete() {
$("[id$=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: 'Default.aspx/GetFruits',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
};
}))
}
});
}
});
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Enter search term:
<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick = "Submit" />
</ContentTemplate>
</asp:UpdatePanel>
ASP.Net Server Side WebMethod DataSource
I have made use of ASP.Net WebMethod for this example, which acts as a source of data. The following WebMethod accepts a parameter prefix and the value is matched with the list of Fruits.
The matching records are returned as an Array of string.
C#
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod()]
public static string[] GetFruits(string prefix)
{
List<string> fruits = new List<string>();
fruits.Add("Mango");
fruits.Add("Apple");
fruits.Add("Banana");
fruits.Add("Orange");
fruits.Add("Pineapple");
fruits.Add("Guava");
fruits.Add("Grapes");
fruits.Add("Papaya");
return fruits.Where(f => f.ToLower().IndexOf(prefix.ToLower()) != -1).ToArray();
}
VB.Net
<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetFruits(prefix As String) As String()
Dim fruits As New List(Of String)()
fruits.Add("Mango")
fruits.Add("Apple")
fruits.Add("Banana")
fruits.Add("Orange")
fruits.Add("Pineapple")
fruits.Add("Guava")
fruits.Add("Grapes")
fruits.Add("Papaya")
Return fruits.Where(Function(f) f.ToLower().IndexOf(prefix.ToLower()) <> -1).ToArray()
End Function
Fetching the selected item on Server Side
The selected item can be fetched on server side inside the click event handler of the Button from the Request.Form collection as shown below.
C#
protected void Submit(object sender, EventArgs e)
{
string customerName = Request.Form[txtSearch.UniqueID];
ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", "alert('Name: " + customerName + "');", true);
}
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
Dim customerName As String = Request.Form(txtSearch.UniqueID)
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "alert", "alert('Name: " & customerName & "');", True)
End Sub
Screenshot
![jQuery AutoComplete not working inside ASP.Net AJAX UpdatePanel Partial PostBack]()
Demo
Downloads
