Question

I have a script which allows to display Google suggestions. The problem is that it STILL displays the list even when the value of input is different than the data available, I rather have it closed. Take a look at this Fiddle: JsFiddle

Type a letter than some rubbish like ‘cjfsdkcrdvhcxrbsks’ You will see the list is still showing. So how do I close it if the value does not match the suggestions?

Answer 1

You actually got an error if you have a look in the console.

When the search does not return results, the object data.query.results.toplevel is null. As you don’t check for that, there is an exception when trying to access data.query.results.toplevel.CompleteSuggestion and the menu does not close simply because the code just stops working.

Check for null for data.query.results.toplevel and in case it is null, use response([]); to close the menu:

success: function(data) {

    if (typeof data == 'string') {
        data = $.parseJSON(data);
    }

    if (data.query.results.toplevel === null) {
        // passing an empty array to response callback closes the menu
        response([]);
        return;
    }

    response(
        $.map(
        data.query.results.toplevel.CompleteSuggestion,
            function(item) {
                return {
                    label: item.suggestion.data,
                    value: item.suggestion.data
                };
        }));
}

DEMO