Jquery Ui Autocomplete: Enforce Selection From List Without Modifications

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

Solution 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/

Solution 2:

This is an older post, but I think it's mildly incomplete from a UX perspective, due to the focus issue (it doesn't make the change until focus is removed from the input, in this case '#artist', fairly annoying), so I would add:

select: function (event, ui) {
        $("#artist").attr("disabled", false);
    }

so (let's assume it's a button we're trying to enable) that the user sees the enabled object immediately upon selection.