CODEWITHSUNDEEP
javascriptangularjsselectautocomplete
Alex Man
Alex Man

Reputation: 4886

AngularJS select with automplete feature

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"
    }];
});

Upvotes: 0

Views: 85

Answers (1)

user2847643
user2847643

Reputation: 2935

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>

Upvotes: 2

Related Questions