Search code examples
javascriptjqueryangularjsangular-ui-typeahead

Angular UI Bootstrap TypeAhead - How to force a user selection


If a user enters a partial word that matches a typeAhead result, but doesn't select one of the popup options, how can I make it required that user actually select one of the popup options?

Example: If a possible result is called Penguin, and the user starts typing, p-e-n, and penguin pops up but they don't select the option for whatever reason, and the input field loses its focus; then the popup of options goes away, and the input field says, "pen" which would not have a key pair value.

How can I force a user to go back and continue typing in Penguin to select the option?


Solution

  • Add typeahead-editable="false" inside the input element. Then if user does not select any value partially typed values will be removed. In your example "pen" will be removed if user did not select the Penguin.

    Eg.

    <input type="text" typeahead-editable="false"/>