Clear jQuery AutoComplete TextBox when no match found
Below is the jQuery Autocomplete plugin implementation. I have made few changes for displaying No results found message (No match found message) when records are not returned by jQuery Autocomplete plugin.
1. AJAX Success event handler: - The very first change is done in the success event handler of the jQuery AJAX method. Here I have checked the length of the response data and if it is greater than 0 (zero), then the response data that is received is mapped and returned while if the response is empty then in such case I have inserted a dummy Autocomplete Item where I have set the label property as No results found while the value property as -1 and then this item is returned back to jQuery AutoComplete.
2. Select event handler: - Next change is done in the jQuery AutoComplete Select event handler. Here I have checked the value of the selected jQuery Autocomplete item, if it’s value is -1 then then event propagation is stopped and the by returning value as false so that when the No results found message (No match found message) dummy jQuery Autocomplete item is displayed user cannot select it.
When user selects the No results found message (No match found message) dummy jQuery Autocomplete item, then the TextBox’s value is set to blank which ultimately clears the TextBox.
<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">
$(function () {
$("#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) {
if (data.d.length > 0) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
};
}))
} else {
//If no records found, set the default "No match found" item with value -1.
response([{ label: 'No results found.', val: -1}]);
}
}
});
},
select: function (e, u) {
//If the No match found" item is selected, clear the TextBox.
if (u.item.val == -1) {
//Clear the AutoComplete TextBox.
$(this).val("");
return false;
}
}
});
});
</script>
Enter search term:
<input type="text" id="txtSearch" />
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 from 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
Screenshot
![Clear jQuery AutoComplete TextBox when no match found]()
Demo
Downloads
