jQuery UI autocomplete: enforce selection from list without modifications

Question

I am using the custom binding provided in Autocomplete combobox with Knockout JS template / JQuery

I need to enforce that the user must select a value in the autocomplete list and after they select the value to not be able to add additional text to the select. I have searched but I cannot find an example of how to prevent additional text from being entered. It must stay editable incase they selected the wrong drop down but what they type must match 100% with a value from the list.

I found this posting on jquery but its 9 months old and no one posted an answer.

Answer 1

There is no built in function to do what you want.

I made a simple project where using the autocomplete change event you must select the value from the autocomplete, if not the value is deleted.

Change event

Triggered when the field is blurred, if the value has changed.

After the selection the field became disabled, and you can activate it using an activating anchor (for example).

Code:

$("#artist").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://en.wikipedia.org/w/api.php",
            dataType: "jsonp",
            data: {
                'action': "opensearch",
                    'format': "json",
                    'search': request.term
            },
            success: function (data) {
                response(data[1]);
            }
        });
    },
    change: function (event, ui) {
        if (ui.item == null || ui.item == undefined) {
            $("#artist").val("");
            $("#artist").attr("disabled", false);
        } else {
            $("#artist").attr("disabled", true);
        }
    }
});

$('#changeArtist').click(function (e) {
    e.preventDefault();
    $("#artist").attr("disabled", false);
});

Here is a fiddle: http://jsfiddle.net/IrvinDominin/nH4Nx/