jQuery UI autocomplete: enforce selection from lis

问题:

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.

回答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/

回答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.