Making a typeahead with angularJS

Question

I currently use AngularJS and Bootstrap. I want to make a typeahead which show all options when he is selected (when I click on it) not only when I wrote somthing on it. like the example on this site which use JQuery (I can't use JQuery).

here is my controller

countrycatControllers.controller('CountryListCtrl',['$scope',
    function ($scope) {
        $scope.listCountry = [
        {"name": "Switzerland"},
        {"name": "France"},
        {"name": "Spain"},
        {"name": "Brazil"},
        {"name": "Argentina"},
        {"name": "USA"},
        {"name": "Canada"},
        {"name": "China"},
        {"name": "Germany"},
        {"name": "Italy"}
        ];
    }
])

and here is my HTML input :

<pre>Model: {{country | json}}</pre>
<input data-ng-model="country" typeahead="item.name for item in listCountry | filter:$viewValue"/>

Dima Grossman · Accepted Answer · 2014-10-21 20:59:09Z

3

There is an 100% angular directive for the Select2 plugin.

Check out https://github.com/angular-ui/ui-select

edited Oct 21, 2014 at 20:59

answered Oct 21, 2014 at 20:51

Dima Grossman

2,8502 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hagen · Accepted Answer · 2014-04-02 10:25:26Z

0

You can do that on your own by using filter:

<div ng-app>
    <div ng-controller="CountryListCtrl">
        <div>
            <input type="text" placeholder="Enter country here" ng-model="search.name" size="80" ng-focus="modeExpanded=true" ng-blur="modeExpanded=false" />
            <div ng-show="modeExpanded">
                <div ng-repeat="item in listCountry | filter:search">{{item.name}}</div>
            </div>
        </div>
    </div>
</div>

See http://docs.angularjs.org/api/ng/filter/filter. The idea is that the search model mimics the structure of the listCountry entries. ng-focus and ng-blur are used to get show the list only when you actually click on the input element.

answered Apr 2, 2014 at 10:25

Hagen

4613 silver badges4 bronze badges

1 Comment

Laetitia42 Over a year ago

thanks for your idea but I'm trying to use a real typeahead like in my example

Collectives™ on Stack Overflow

Making a typeahead with angularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related