jQuery UI autocomplete- no results message

Question

I'm trying to have a "No Results" message appear in the dropdown menu if there are no results. So for instance, if I type in "ABCD" into the text field, and there is no entity that matches, the message "No Results." will be displayed.

After looking through stackoverflow for the various different ways of accomplishing this, and trying a few of them, I still can't get it to work.

How can I add a "No Results" message to the dropdown menu when no results are found?

jQuery:

    $element.autocomplete({
        source: function (request, response) {            
            $.ajax({
                url: thUrl + thQS,
                type: "get",
                dataType: "json",
                cache: false,
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        if (data.indexOf(item) === -1) {
                            return { label: "No Results." }
                        } else {
                            return {
                                label: item.Company + " (" + item.Symbol + ")",
                                value: item.Company
                            }
                        }
                    }));
                }
            });
        },
        minLength: that.options.minLength,
        select: function (event, ui) {
               reRenderGrid();
        }
    });

I have tried adding an if() statement with the following but that didn't work.

if (data.length === 0) {
    // Do logic for empty result.
}

I am able to overwrite the first entry with the text "No Result" if I do the following...

if (data.indexOf(item) === 0) {
    return { 
        label: "No Results." 
}

...but if I set data.indexOf(item) === -1 nothing shows up.

I just recently tried the following, and when there is no data, it goes into the loop, however, "No Results" is not being displayed in the menu:

   success: function (data) {
        response($.map(data, function (item) {
            return {
                label: item.Company + " (" + item.Symbol + ")",
                value: item.Company
            }
        }));
        if (data.length === 0) {
            label: "No Results."
        }
    }

I have also attempted to use the below example from Andrew Whitaker with no luck:

ANDREW WHITACKER'S FIDDLE: http://jsfiddle.net/J5rVP/128/

SOURCE: http://blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/

Solution 1

Modify the function like this to check for length of data.

success: function (data) {
    if(!data.length){
        var result = [
            {
                label: 'No matches found', 
                value: response.term
            }
        ];
        response(result);
    }
    else{
        // normal response
        response($.map(data, function (item) {
            return {
                label: item.CompanyName + " (" + item.SymbolName + ")",
                value: item.CompanyName
            }
        }));
    }
}

Solution 2

if (!ui.content.length) {
    var noResult = { value:"",label:"No results found" };
    ui.content.push(noResult);
    //$("#message").text("No results found");
} 

Fiddle

http://jsfiddle.net/J5rVP/129/

Update

Put the code at the end of your auto-complete setup just after select: function (event, ui) {..}

    ..........
    minLength: that.options.minLength,
    select: function (event, ui) {
        reRenderGrid();
    },   //HERE - make sure to add the comma after your select
    response: function(event, ui) {
        if (!ui.content.length) {
            var noResult = { value:"",label:"No results found" };
            ui.content.push(noResult);
        }
    }
});

Solution 3

My answer is almost identical to @neelmeg and @Trever, but I have added an extra check, so user won't be able to select the "no result" message:

$(".my-textbox").autocomplete({
    minLength: 2,
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "/some-url",
            type: "POST",
            dataType: "json",
            data: { prefix: request.term, __RequestVerificationToken: token },
            success: function (data) {
                if (!data.length) {
                    var result = [{ label: "no results", value: response.term }];
                    response(result);
                }
                else {
                    response($.map(data, function (item) {
                        return { label: item.someLabel, value: item.someValue };
                    }))
                }
            }
        })
    },
    select: function (event, ui) {
        var label = ui.item.label;
            if (label === "no results") {
            // this prevents "no results" from being selected
            event.preventDefault();
        }
        else {
            /* do something with the selected result */
            var url = "some-url"
            window.location.href = url;
        }
    }
});

Solution 4

For me the reason, why this messages occured were:

MISSING CSS FILES O JQUERY UI 

so adding:

<link rel="stylesheet" href="jqueryui/themes/flick/jquery-ui.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jqueryui/themes/flick/jquery.ui.theme.css" type="text/css" media="screen" />

solved my problem

View more solutions