Select2 - 告诉用户是否输入了新的搜索选项?

时间:2014-03-09 17:49:32

标签: javascript ajax angularjs jquery-select2

我的select2选项如下所示:

$scope.select2Options = {
    ajax: {
        dataType: 'json',
        url: '/api/locations/',
        data: function(term) {
            return {
                search: term
            };
        },
        results: function(data) {
            var locations = data.locations.map(formatLocations);
            return { results: locations }; 
        }
    },
    createSearchChoice: function (term, data) {
        if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {
                id: term,
                text: term
            };
        }
    }
};

正如您所看到的,我正在使用angular-ui-select2指令,但如果我使用普通的jquery select2,那么我的选项将是相同的。

该代码适用于允许用户添加搜索字词,但我想知道是否有一种很好的方法可以判断用户何时输入了新的搜索选项。

现在我只能想到:

1)等待用户模糊输入 2)向我的服务器发出ajax调用,以查看它是否包含输入的当前值

下行是我总是2),即使用户正在选择现有的选择。

我希望有一些像'onNewSearchChoice'这样的事件我可以听。

有人有任何建议吗?

1 个答案:

答案 0 :(得分:1)

使用此处记录的select2-selecting事件: http://ivaynberg.github.io/select2/#documentation

此外,您可以在查询回调和createSearchChoice回调中使用共享变量来跟踪它何时是新选择,例如:

var newTerm = false;

$scope.select2Options = {
    query: function(query) {
        newTerm = false;
        ...
    },

    createSearchChoice: function (term, data) {
        term = $.trim(term);
        if (term) newTerm = term;
        ...
    }
};