how to make dropdown with input field in angular.js

Question

i am making dropdown list with input field in angular.js but got no success

the code which i using..

<div ng-app="" ng-controller="namesCtrl">
            <h2>filter input</h2>
            <input type="text" ng-model="test"/>
            <ul>
                <li ng-repeat="x in names | filter:test | orderBy : 'name'">
                    {{ x.name + ',' + x.country }}
                </li>
            </ul>
        </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "";
        $scope.lastName= "";
    });
</script>
<script src="namescontrol.js"></script>

What do you mean by dropdown list with input field? You are showing list items in your code ,not dropdown list.Can u share a fiddle or plunker? — Navaneet
– Navaneet, Commented Aug 11, 2015 at 14:16
i want that, when i type any letter in input field then the dropdown list will be appear of related letter, i mean list should appear with filteration — Tanveer Ahmad
– Tanveer Ahmad, Commented Aug 11, 2015 at 14:19

Joy · Accepted Answer · 2015-08-11 15:45:31Z

1

Check the working demo: JSFiddle.

Use a customized filter to perform the filtering. Since ng-model binds to the value key. Whenever key is changed, the items will be filtered and the view will be changed.

angular.module('Joy',[])
.controller('JoyCtrl', ['$scope', function ($scope) {
    $scope.items = ['one', 'two', 'three', 'four', 'five'];
    $scope.key = '';
    $scope.search = function (value) {
        return value.indexOf($scope.key) >= 0;
    }
}]);

HTML:

<div ng-app="Joy" ng-controller="JoyCtrl">
    <input type="text" ng-model="key">
    <div>
        <li ng-repeat="item in (items | filter:search)" ng-bind="item"></li>
    </div>
</div>

Update 1

If you want to hide the list initially: JSFiddle:

$scope.search = function (value) {
    return $scope.key !== '' && value.indexOf($scope.key) >= 0;
};

Update 2

I have developed an open source project angular-sui based on Angular and Semantic-UI. There is a directive sui-select, which is exactly what you want. Please check the Demo.

edited Aug 11, 2015 at 15:45

answered Aug 11, 2015 at 14:27

Joy

9,60011 gold badges50 silver badges99 bronze badges

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

3 Comments

Tanveer Ahmad Over a year ago

dropdown list is there already. i want that dropdown list not show before type anything

Tanveer Ahmad Over a year ago

Thank u for giving answer, joy

Joy Over a year ago

@TanveerAhmad My pleasure. Please kindly upvote/accept :)

Andremoniy · Accepted Answer · 2017-06-30 15:08:31Z

1

I think what you are looking for is autocomplete functionality. AngularUI offers this through their Typeahead directive. https://angular-ui.github.io/bootstrap/#/typeahead

You want to have something like this:

<input type="text" ng-model="test" typeahead="name for name in names"/>

The directive will dynamically generate the list so you don't need to create that explicitly yourself.

edited Jun 30, 2017 at 15:08

Andremoniy

35.2k25 gold badges143 silver badges259 bronze badges

answered Aug 11, 2015 at 14:31

Long Nguyen

4363 silver badges8 bronze badges

1 Comment

Long Nguyen Over a year ago

Heres a plunker to get you started: plnkr.co/edit/aUfWBBgxpGjUN6u9eGsN?p=preview

Collectives™ on Stack Overflow

how to make dropdown with input field in angular.js

2 Answers 2

Update 1

Update 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update 1

Update 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related