In this article I will explain how to display no results found message (no match found message) when no matching records are found by jQuery Autocomplete plugin.
You might also like to read:
 
Display no results found when no matching records are found by jQuery Autocomplete plugin
Below is the jQuery Autocomplete plugin implementation.
<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 () {
        $("[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) {
                        if (data.d.length > 0) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                };
                            }))
                        } else {
                            response([{ label: 'No results found.', val: -1}]);
                        }
                    }
                });
            },
            select: function (e, u) {
                if (u.item.val == -1) {
                    return false;
                }
            }
        });
    });
</script>
Enter search term: <input type = "text" id = "txtSearch" />
 
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.
 
ASP.Net Server Side WebMethod DataSource
I have made use of ASP.Net WebMethod for this example, which acts as a source of data.
[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();
}
 
Display No results found message (No match found message) in jQuery Autocomplete
 
 
Demo
View Demo
 
Downloads