如何获取在 ui-select 搜索框中输入的值？答案

【问题标题】：How to get value which typed in ui-select search box?如何获取在 ui-select 搜索框中输入的值？
【发布时间】：2016-01-04 15:50:34
【问题描述】：

我正在使用 ui-select (https://github.com/angular-ui/ui-select)。

ui-select 支持我们进行搜索、选择和多选。但是如何获取用户在 ui-select 搜索框中输入的值？如果用户输入的值不正确，我想显示一条错误消息。

示例：在下面这个带有 Select2 主题的 plunker 中，当用户输入：'asdasd'（此文本与任何结果都不匹配）我想显示一条消息 “找不到任何结果！” 分配给 'scope.person.selected'

plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

我该怎么做？

非常感谢！

【问题讨论】：

标签： angularjs ui-select

【解决方案1】：

您可以使用 angular-ui-bootstraps 的 typeahead 来实现相同的目的。这是 pluncker 链接http://plnkr.co/edit/gsJzdTZHiXZ6MrtTe4F3?p=preview

HTML：

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
      <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>

【讨论】：

谢谢。但是在我的项目中，我在很多情况下都使用了 ui-select。更改插件对我来说太复杂了...

【解决方案2】：

您可以使用ng-keypress="fn($select.search)" at <ui-select...>
并在控制器中使用此函数来获取输入。

$scope.fn = function(search) {
//do something with search
}

【讨论】：

【解决方案3】：

您也可以在<ui-select...> 使用ng-init="setSelect($select)"

【讨论】：

【解决方案4】：

angular_ui_select 中的输入数据进入$select.search model。您可以使用ui-select-choice 的刷新属性。只需在refresh="test($select.search)" 中传递函数，并分别使用refresh-delay 和minimum-input-length 属性设置延迟和最小输入长度。这是一个简单的例子：

<ui-select ng-model="model" theme="theme">
     <ui-select-match>{{data}}</ui-select-match>
     <ui-select-choices repeat="options in data" refresh="yourFunction($select.search)" refresh-delay="100" minimum-input-length="1"></ui-select-choices>      
</ui-select>

我建议您阅读文档，希望对您有所帮助。 angular-ui-select

【讨论】：

$select.search in <ui-select-choices refresh="$ctrl.handleChange($select.search)" ... 是输入的值。

【解决方案5】：

您可以通过创建自定义过滤器来做到这一点。如本例所示； 'uppercasetr' 是自定义过滤器。

<ui-select ng-model="vm.mc" theme="select2" limit="10">
    <ui-select-match placeholder="Country...">{{$select.selected.SectionTitle}}</ui-select-match>
    <ui-select-choices repeat="item in vm.data | propsFilter:{SectionTitle : ($select.search | uppercasetr)} | limitTo:$select.limit">
        <div ng-bind-html="(item.SectionTitle) | highlight: $select.search"></div>
        <small>
            <b>Country:</b> {{item.SectionValue1}}
       </small>
    </ui-select-choices>
</ui-select>

【讨论】：

【解决方案6】：

如果我们使用 $select.search 来获得期望的结果，我们必须再次循环进行搜索。到目前为止，对于大于 0.17.1 的版本，我们可以使用最简单的解决方案：使用ui-select-no-choice

https://github.com/angular-ui/ui-select/wiki/ui-select-no-choice

非常感谢您的支持！

【讨论】：