Angular-UI: Force Typeahead results

Question

I have a text field that uses AngularUI's typeahead feature. It looks like this:

<input typeahead="eye for eye in autocomplete[column] | filter:$viewValue">

I'd like to force the user to select an option from the list that is generated. If they type something that is not on the list exactly as it appears, on blur (clicking outside of the text field), i'd like the value of the text field to reset to it's original value.

Is this functionality part of the typeahead directive, or will I need to extend it? I searched for about 10 minutes on google and stackoverflow, but couldn't find any relevant documentation.

Can anyone please point me in the right direction to accomplish this?

Answer 1

There is an attribute in the plugin to force existing values only: typeahead-editable="false". The default value is true.

Only the $modelValue is being set to empty when there is a wrong value selected, and this is actually necessary otherwise we would not be able to write anything. The $viewValue stays with the last text entered. You might be able to bind a blur event of your own to the field to reset the $viewValue?

Here is your JsFiddle with the selected value displayed: http://jsfiddle.net/ZjPWe/61/

You could also use the attribute typeahead-on-select which required a callback when a value is selected, but I am not sure it would work with typeahead-editable="false" because no value is being selected.