views:

321

answers:

3

Is it possible to disallow free text entry in the JQuery UI autocomplete widget?

eg I only want the user to be allowed to select from the list of items that are presented in the autocomplete list, and dont want them to be able to write some random text.

I didn't see anything in the demos/docs describing how to do this.

http://jqueryui.com/demos/autocomplete/

I'm using autocomplete like this

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }
+2  A: 

If you want the user to just get the item from the list then use autocomplete combobox.

http://jqueryui.com/demos/autocomplete/#combobox

HTH

Raja
You can still type into that, that's exactly what he said he didn't want.
Chad Birch
No I don't think he wants that. I think he wants to get it from the item from the list i.e. if the user starts to type "Ja" then if it lists "Java" and "Javascript" then he wants the user to select from one of them and not type "Jab" and submit.
Raja
No I said autocomplete, which implies typing is allowed. But the typing must be restricted to only items in the autocomplete list. The combobox example does exactly that.
JK
Combobox functionally is perfect, but the UI is bad - it looks very different from standard the < select >, so I can't use it. I will look at the example in more detail to see if the drop down button can be left out.
JK
I'm the one that misunderstood what he wanted then. Made an irrelevant edit to this answer so I could take back my downvote.
Chad Birch
+1  A: 

One way would be to use additional validation on form submit (if you are using a form) to highlight an error if the text isn't one of the valid option.

Another way would be to attach to the auto complete's change event which will get fired even if an options isn't selected. You can then do validation to ensure the user input is in your list or display an error if it is not.

Aaron Janes
I went with the .change() event, it was easier and quicker than trying to change the combobox solution to fit.
JK
A: 

What about mustMatch option?

'If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box.'

MAC