AngularJS select with automplete feature

Question

Can anyone please tell me how to create a editable search box, (not autocomplete), since in autocomplete only when we type the selection appears, but in this case when we are not typing anything all the options to be shown like as dropdown, as well as when we type anything options shown should be filtered based on that

Should Works like autocomplete as well as like select.

can anyone please tell me some solution for this

Working Demo

html

<select ng-model="names" ng-options="person.name for person in persons | orderBy:'name'" ng-change="select()">
</select>

script

var app = angular.module('myApp', []);

app.controller('Controller', function ($scope) {
    $scope.persons = [{
        "uid": 1171,
            "name": "Mary",
            "description": "Mary"
    }, {
        "uid": 1172,
            "name": "John",
            "description": "John"
    }, {
        "uid": 1173,
            "name": "Sunny",
            "description": "Sunny"
    }, {
        "uid": 1174,
            "name": "Jacob",
            "description": "Jacob"
    }, {
        "uid": 1175,
            "name": "Susan",
            "description": "Susan"
    }, {
        "uid": 1176,
            "name": "Supriya",
            "description": "Supriya"
    }, {
        "uid": 1177,
            "name": "Sumaya",
            "description": "Sumaya"
    }];
});

Try jQuery chosen, with an angular directive: plnkr.co/edit/HbPVSWb9nvV2ecHibaXw?p=preview — Raghavendra
– Raghavendra, Commented Jul 17, 2014 at 10:35

user2847643 · Accepted Answer · 2014-07-17 10:22:09Z

2

Sounds like ui-select.

Demo here - see last select box.

For example:

<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
  <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="country in countries | filter: $select.search">
    <span ng-bind-html="country.name | highlight: $select.search"></span>
    <small ng-bind-html="country.code | highlight: $select.search"></small>
  </ui-select-choices>
</ui-select>

answered Jul 17, 2014 at 10:22

user2847643

2,93517 silver badges23 bronze badges

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

1 Comment

user2847643 Over a year ago

I always say: IE users are already used to the web being broken, so why care? But seriously, if you absolutelly need to support IE8 then I guess you would be left with wrapping some JQuery plugin in your own directive.

Collectives™ on Stack Overflow

AngularJS select with automplete feature

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related