如何在Jquery UI自动完成中搜索多个属性?

时间:2017-02-21 08:08:12

标签: javascript jquery angularjs jquery-ui jquery-ui-autocomplete

我有一组结构与此类似的对象:

$scope.usersList = [{
  "name": "John",
  "email": "john@xyz.com",
  "id": "abcd"
},{
  "name": "Jane",
  "email": "jane@xyz.com",
  "id": "efgh"
}];

在对服务器进行ajax调用后,我得到了数组。我目前正在像这样的角色应用程序中使用jQuery UI Autocomplete

$(input).autocomplete({
  source: $scope.usersList,
  appendTo: container,
  position: { 
    at: 'left bottom', 
    of: container 
  },
  select: function(e, v) {
    e.preventDefault();
    //Do something
  }
});

如果数组只包含名称,则上述代码有效,但我想搜索" email"和" id"领域也是如此。例如如果我输入" abcd"在搜索框中,我想在结果列表中看到John的名字。我无法弄清楚如何继续这个。

2 个答案:

答案 0 :(得分:1)

您可以尝试修改您的来源,如下所示:

import

// usersList = $ scope.usersList(如你的问题所述)

jsfiddle:http://jsfiddle.net/32Bck/501/

答案 1 :(得分:0)

经过一段时间的绊脚石,我设法将搜索字词作为任何属性。这应该适用于您的情况(只需用您的收藏替换var usersList):

<input id="in" type="input" class="ui-autocomplete-input" />

var usersList = [{
    "name": "John",
    "email": "john@xyz.com",
    "id": "abcd"
  }, {
    "name": "Jane",
    "email": "jane@xyz.com",
    "id": "efgh"
}];

$("#in").autocomplete({
    source: function(request, response) {
        function hasMatch(s) {
            return s.toLowerCase().indexOf(request.term.toLowerCase()) !== -1;
        }
        var i, l, obj, matches = [];

        if (request.term === "") {
            response([]);
            return;
        }

        for (i = 0, l = usersList.length; i < l; i++) {
            obj = usersList[i];
            if (hasMatch(obj.name) || hasMatch(obj.email) || hasMatch(obj.id)) {
                if ($.inArray(obj, matches) < 1) { // remove duplicates
                    matches.push({
                        "label": obj.name
                        //add here other properties you might need
                    })
                }
            }
            response(matches);
        }
    }
});

在这里工作小提琴:https://jsfiddle.net/qg50zwv3/