【问题标题】:Angular-UI Select2 directive Search functionality not workingAngular-UI Select2 指令搜索功能不起作用
【发布时间】:2015-05-29 02:37:40
【问题描述】:

我正在使用 angular-ui select2 指令。我知道它现在已被弃用,但我的应用程序自始至终都在使用此指令,并且我想要进行改进。很快,我们将迁移到新的 ui=select 替代方案。

按照http://select2.github.io/select2/ 的示例,我正在通过 ajax 调用加载 json 数据。数据加载正确并且可以选择,但是我无法搜索和缩小/过滤结果。据我了解,指令支持这一点。当我输入内容时,数据会刷新,但不会根据搜索词进行过滤。下面是我的代码

<input type="text" id="users" ui-select2="filters.select2Test" ng-model="filters.model.users"
data-placeholder="Pick a user" ng-required="true" style="width: 300px" />

$scope.filters = {
                     select2Test: {
                    id: function(user) {
                        return user.code;
                    },
                    minimumInputLength: 3,
                    multiple: true,
                    ajax: {
                        url: 'api/employee', //This URL points to an internal location and wouldn't work 
                        dataType: 'json',

                        data: function (params) {
                            return {
                                q: params.term, // search term
                                page: params.page
                            };
                        },
                        results: function(data, page) {
                            return { results: data };
                        }
                    },

                    formatResult: function(data) {
                        return "<div class='select2-user-result'>" + data.name + "</div>";
                    },
                    formatSelection: function(data) {
                        return data.name;
                    },
                    initSelection: function(element, callback) {
                        var data = [];
                        $(element.val().split(",")).each(function(i) {
                            var item = this.split(':');
                            data.push({
                                id: item[0],
                                title: item[1]
                            });
                        });
                        callback(data);
                    }
                }
           }

【问题讨论】:

  • 您找到解决方案了吗?我也面临同样的问题。

标签: javascript html angularjs angular-ui ui-select2


【解决方案1】:

需要在您的 select2 选项中添加匹配器:

select2Test: {
    ...
    matcher: function(term, text, option) {
      return option.name.includes(term);
    },
    ...
}

【讨论】:

    猜你喜欢
    • 2012-12-05
    • 1970-01-01
    • 2013-02-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多