JQuery UI autocomplete: force selection from a list without changes

Question

I am using the custom binding provided in AutoPost using the Jock Template / JQuery Template

I need to ensure that the user must select a value in the autocomplete list and after selecting a value so that it is not possible to add additional text to the selection. I searched, but cannot find an example of how to prevent the input of additional text. It should remain editable if they chose the wrong disclosure, but what they type should correspond to 100% with the 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 in which using the autocomplete change event you must select a value from autocomplete if the value is not deleted.

Change Event

It starts when the field is blurry, if the value has changed.

After selecting the field has become disabled, and you can activate it using the activating anchor (for example).

the 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 the fiddle: http://jsfiddle.net/IrvinDominin/nH4Nx/

Answer 2

This is an older post, but I think it is slightly incomplete from a UX point of view due to a focus problem (it does not change until the focus is removed from the input, in this case "#artist", fairly annoying) so I would add:

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

therefore (for example, this is the button we are trying to enable) that the user immediately sees the selected object after selection.