Autocomplete widget allows to search and select results from a pre-populated list and the source can be from database, array etc. Once you start typing the widget starts searching for results to matched results.
One of the issues which I find with autocomplete is that it gives the user an option to select from the list or type in anything. I have working with few projects which wants only selection from list and not any free text.
To solve this issue, we can use change event with autocomplete which will check if you have selected the value and if you have not then it will delete the value. The change event is being triggered when the value is being changed in the textbox or if the field is being blurred. After selecting the option from the list it will be a good option to disable the tying from the textbox and add a link next to the text box to inform the user to activate tying if they want to make changes. This way the textbox will be under control and typing can be prevented.
Sample Code
$(document).ready(function () { $("#category").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) { $("#category").val(""); $("#category").attr("disabled", false); } else { $("#category").attr("disabled", true); } } }); $('#changeCategory').click(function (e) { e.preventDefault(); $("#category").attr("disabled", false); }); });
Resources:
Reading materials link
Working fiddle link
Happy Coding