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>

AngularJS选择具有自动完成功能

1 个答案: