如何在jQuery UI Autocomplete中的過濾結果中實現我自己的規則

Question

這是我的代碼：

   var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
                   {label:"JUH28", value: "2", fk: "0", desc: "world"},];
                   {label:"HK383", value: "3", fk: "3", desc: "!"},];
     $( "#serial_no" ).autocomplete({
        minLength: 0,
        source: function(request, response) {
                var results = $.ui.autocomplete.filter(projects, request.term);
                response(results);
            },
        focus: function( event, ui ) {
           $( "#serial_no" ).val( ui.item.label );
              return false;
           },
        select: function( event, ui ) {
           $( "#serial_no" ).val( ui.item.label );
           $( "#device_id" ).val( ui.item.value );
           $( "#device_model" ).text( ui.item.desc );
           return false;
        }
     })
     .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
     };

因此，現在，例如，如果我在字段中鍵入“ H”，則將顯示所有3個結果（即PH2938，JUH28，HK383）。 我的問題是：是否可以僅顯示fk = 3的結果（即PH2938，HK383）。也就是說，我可以實施自己的規則來顯示哪個結果。

Answer 1

如果我已正確理解，則需要按某些條件過濾projects 。 在這種情況下， fk等於'3' 。

由於您已經在使用jQuery，因此$ .grep是篩選任務的理想選擇。

$.grep(projects, function (project) {
  return project.fk === '3';
});

現在，我們必須決定在哪里執行此過濾。

如果您想擺脫那些符合fk標准的項目，而不論自動完成輸入中使用的術語如何，我都會在原始projects數組中這樣做：

var projects = [{label:"PH2938", value: "1", fk: "3", desc: "hello"},
               {label:"JUH28", value: "2", fk: "0", desc: "world"},];
               {label:"HK383", value: "3", fk: "3", desc: "!"},];    
projects = $.grep(projects, function (project) {
  return project.fk === '3';
});

如果您想要的是更靈活的東西，它允許您根據其他條件提供不同的數據源，不僅是標簽的文本匹配，還可以在source屬性中執行以下過濾：

source: function(request, response) {
  var results = $.ui.autocomplete.filter(projects, request.term);
  // Filter the matched results by project fk 3. 
  results = $.grep(results, function (project) {
    return project.fk === '3';
  });
  response(results);
},

過濾也可以在匹配之前執行：

source: function(request, response) {
  // Filter the matched projects by project fk 3. 
  var filteredProjects = $.grep(projects, function (project) {
    return project.fk === '3';
  });
  var results = $.ui.autocomplete.filter(filteredProjects, request.term);
  response(results);
},

請參閱后者的演示 。