Search code examples
angularjsbootstrap-typeahead

angular bootstrap typeahead filter

Here's a plunker showing the problem I'm seeing:

http://plnkr.co/edit/TKIHuNzPrrXlbzEdjdqN?p=preview

I want a typeahead where the user can only select from provided options. I have the following HTML:

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<input type = "text" ng-model = "receiver.value" class = "give-recipient" 
 typeahead = "user for user in users" typeahead-editable = "false">

It displays a typeahead, but it does not filter on what I type. IOW, I expect that if I type a "g", only users with "g" in their names should show up, but all users show up, with matching letters bolded.

What are the settings I need to use? Thank you, Greg

Solution

  • You need to change

    typeahead="user for user in users"

    to 

    typeahead="user for user in users | filter:$viewValue "

    The UI Bootstrap documentation states that $viewValue is a

    variable that corresponds to the value entered inside the input

    A working plunkr can be seen here