Question

I have an autocomplete jQuery feature for my text field, suggesting programming languages:

Java
C++
PHP

Once the user clicks a suggestion, a callback function is called which sets the hidden ID of the language, gotten by the ajax request.

The problem is, if the user manually writes the language name (doesnt click on the autocomplete), this callback function won’t get called, and therefore the hidden ID won’t be set – I would have to search for it by name in the database.

Is there a practical way to handle this kind of an issue?

Answer 1

If you’re using a local data source, this is pretty easy–just see if the user’s entry is inside the source array:

$("#auto").autocomplete({
    source: availableTags,
    change: function(event, ui) {
        if (ui.item) {
            /* User selected an item. value is ui.item.value */
        } else {
            if ($.inArray(this.value, availableTags) >= 0) {
                /* User typed item in suggestion list. value is this.value. */
            } else {
                /* User typed something that wasn't in the suggestion list */
            }
        }
    }
});

Example: http://jsfiddle.net/andrewwhitaker/PNqkB/

You could also use Scott González’ autoSelect plugin (demo). The advantage of using the plugin is that it should handle remote sources as well, where my example only handles a local source.

Here’s an example with Scott’s plugin using a remote data source: http://jsfiddle.net/ZEzMa/