javascript - AngularJS 选择具有自动完成功能

Question

任何人都可以告诉我如何创建一个可编辑的搜索框(不是自动完成)，因为在自动完成中，只有当我们键入选择时才会出现，但在这种情况下，当我们没有键入任何内容时，所有选项都会显示为下拉列表，以及当我们键入任何内容时显示的选项应基于此进行过滤

应该像自动完成和选择一样工作。

谁能告诉我一些解决方案

Working Demo

html

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

脚本

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

Answer 1

听起来像ui-select .

演示 here - 查看最后一个选择框。

例如:

<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>