Jquery UI Autocompleteで複数の属性を検索するにはどうすればよいですか？

Question

私はこれに類似した構造を持つオブジェクトの配列を持っている：

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

私は、サーバーへのAJAX呼び出しを行った後、配列を取得します。配列は、単に名前で構成されている場合は、私は現在、上記のコードは動作しますが、この

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

のように角度アプリでjQueryのUIオートコンプリートを使用していますが、私は同様に、「電子メール」と「ID」フィールドに渡って検索します。例えば検索ボックスに「abcd」と入力すると、結果リストにJohnの名前が表示されます。私はこれを進める方法を理解することができません。

Answer 1

あなたは以下のようにソースを変更してみてくださいすることができ：

$("#suggest").autocomplete({ 
     delay: 100, 
     minLength:2, 
     **source: function (request, response) { 
      var temp = []; 
        usersList.filter(buildResponse); 

        function buildResponse(p){ 
         for (var key in p) { 
         if (p.hasOwnProperty(key)) { 
         if(p[key].indexOf(request.term) > -1){ 
         temp.push({ 
         "label" : p[key], 
         "value" : p      
         });      
         } 
         } 
         } 
        } 
        console.log(temp); 
        response(temp); 
      }**, 
     select: function (event, ui) { 
     // Prevent value from being put in the input: 
     this.value = ui.item.label; 
     // Set the next input's value to the "value" of the item. 
     console.log(ui.item); 
     event.preventDefault(); 
     } 
     }); 

// USERSLIST = $ scope.usersList（あなたの質問で述べたように）

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

Answer 2

しばらく私は検索用語を何らかの財産にすることに成功しました。これは、（ちょうどあなたのコレクションで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/