CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrapbootstrap-typeahead
Josue Espinosa
Josue Espinosa

Reputation: 5089

AngularJS Bootstrap: Limit typeahead results

I have a simple text field that uses typeahead with results from an array. I would like to limit user input to ONLY be able to type/select results in the array.

If my array looked like this:

['alison','bentley','christopher'];

The user could type 'ali', or 'topher', but in the end, the typeahead should select whatever is currently highlighted (if the input blurs), or the user selects.

However, the user should not be able to type 'z', because it matches nothing in the array. It shouldn't let them type that at all.

Does this already exist, or do I need to create a custom directive? I searched other similar questions, but they weren't quite the same.

I tried using typeahead-editable, because I thought that was what I needed, but it prevented the typeahead from working entirely. On the bootstrap website, it describes it as "Should it restrict model values to the ones selected from the popup only?" Am I doing something incorrectly?

Here is a plunker:

If you remove typeahead-editable, the basic typeahead should work.

Upvotes: 4

Views: 5896

Answers (1)

César
César

Reputation: 1638

By default Typeahead doesn't filter the array, you need to declare it using filter:$viewValue, e.g.

<input 
  ng-model="name"
  typeahead="address for address in locations | filter:$viewValue | limitTo:5" />

Here is a demo

Upvotes: 10

Related Questions