Question

I’ve been customizing the Jquery UI auto-complete to ensure that users submit only data from the geonames datasource.

DEMO

Upon selecting a city name I also retrieve the country, latitude, and longitude from the geonames webservice and add them to hidden inputs.

To ensure that people actually select a city from the suggestion list, I clear the input if you click away from the suggestion list.

(I’m also doing some validation in php)

The issue: after clicking out of the suggestion list, it does not reappear when you type a city name unless you press the spacebar. I’m not sure what is causing this.. Also when you type a city with spaces, sometimes the suggestion list disappears.

Could someone please share some guidance? I also welcome any other suggestions!

Answer 1

The autocomplete plugin used to have an option called “mustMatch” – It did what you wanted but has since been removed.

I believe you can re-implement it by following these instructions:

How to implement "mustMatch" and "selectFirst" in jQuery UI Autocomplete?

ANOTHER OPTION:

replace your change (in your revised fiddle) or close (in original fiddle) with the following ugly workaround:

        change: function (event, ui) {
            //if the value of the textbox does not match a suggestion, clear its value
            if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
                $(this).val('####');        
                $(this).autocomplete("search");
                $(this).val('');
                $(this).autocomplete("close");                    
            }
        }