Question

I’m using the jqueryui autocomplete to have my textbox appear with various options for the user.

In this case I only want the user to be able to choose a value from the list and not type in another value.

I have achieved this by doing:

$('#modelNo').autocomplete({
    source: '/myurl/asdf'
    minLength: 2,
    delay: 300,
    change: function(event, ui) {
        if (!ui.item || ui.item.label == '') {
            $(this).val('');
        }
    }
});

Now this works pretty well so that when the user leaves the field and selects another the field is cleared, however it causes another issue that if they type the same text again the autocomplete will not run, I’m assuming I’ve caused its states to be messed up somehow and maybe it thinks the list is already shown.

I did take a look at the combo box example on the jqueryui site but it seemed to be quite complex compared to what I am trying to achieve.

How can I make the autocomplete refresh its list in this case?

Answer 1

We’ll I seem to have fixed it by doing a

 $(this).autocomplete("search", "");

after clearing the value, would be interested if there is a better way though.