AutoComplete text box ----No values found

Question

I have implemented an autoComplete textbox using jquery function and am fetching the suggest values from DB. Everything looks fine.

But if no matching data found i want to display some user friendly message saying " No match found" to the user and clear the textbox. how can i implement this ?

added the currnt code

function txtAutoComplete(acUrl, minLength, txtbxId) {
    $("#" + txtbxId).autocomplete({
        minLength: minLength, 
        source: function (request, responseFn) {
                $.post(acUrl, null, function (resp) {
                var txtValue = $.ui.autocomplete.escapeRegex(request.term);
                var matcher = new RegExp("^" + txtValue, "i");
                var a = $.grep(resp, function (item, index) {
                    return matcher.test(item);
                });
                responseFn(a);
            });
        }

Thanks to Yuriy Rozhovetskiy.

var error = 'No match';
if (a.length == 0) {
    responseFn(error);
}
else {
    responseFn(a);
}

But the Error suggestion is displayed Vertically how can i make it to display like a normal autosuggest. Thanks

Answer 1

You can do all this staff in source function:

source: function (request, responseFn) {
    $.post(acUrl, null, function (resp) {
        var txtValue = $.ui.autocomplete.escapeRegex(request.term);
        var matcher = new RegExp("^" + txtValue, "i");
        var a = $.grep(resp, function (item, index) {
            return matcher.test(item);
        });

        if(a.length == 0){
            alert("No matches found");
            $("#" + txtbxId).val("");
        }
        responseFn(a);
    });
}

Answer 2

Changed my code as suggested by Yuriy Rozhovetskiy with little modification to send JSON that worked

var error = ["No match"];
if (a.length == 0) {
    responseFn(error);
}
else {
    responseFn(a);
}