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 autocom

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/