jQuery UI自動完成不過濾來自服務器的響應

Question

我正在使用jQueryUI自動完成，但遇到了一個小問題，因爲用戶在文本框中輸入時沒有進行過濾。

基本上發生的是，在我鍵入3個字符後，自動填充下拉列表將填充從服務器返回的整個項目集合，但是選擇不會因輸入更多字符而縮小。

任何想法爲什麼會發生這種情況？

客戶：

$("#Make").autocomplete({ 
    minLength: 3, 
    source: function (request, response) { 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("LookupGadgets", "Quote")', 
      dataType: "json", 
      data: { 
       type: $("#Type").val() 
      }, 
      success: function (data) { 
       response($.map(data, function (c) { 
        return { 
         label: c.Details, 
         value: c.Details 
        } 
       })); 
      } 
     }); 
    } 
}); 

服務器：

public ActionResult LookupGadgets(string type) 
{ 
    var retValue = gadgetsRepository.AvailableGadgets 
     .Where(x => x.Type == type) 
     .OrderBy(x => x.Make) 
     .Select(r => new { Details = r.Make + " " + r.Model }); 
    return Json(retValue); 
} 

Answer 1

當您使用自動完成的遠程味道，小部件預計你做過濾。通過您的操作方法判斷，您只需從存儲庫中選擇項目並將它們返回到小部件，因此下拉列表中包含所有結果。

如果您想要使用遠程數據，但希望jQueryUI負責過濾（根據數據集的大小，這可能很好），您可以先通過AJAX請求一組項目，然後讓自動完成其餘的：

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("LookupGadgets", "Quote")', 
    dataType: "json", 
    data: { 
     type: $("#Type").val() 
    }, 
    success: function (data) { 
     var source = $.map(data, function(c) { 
      return { label: c.Details, value: c.Details }; 
     }); 
     $("#Match").autocomplete({ 
      source: source, 
      minLength: 3 
     }); 
    } 
}); 

如果你的數據集很大，你可能想要避免這個策略並在控制器動作中執行過濾。這種過濾如何發生真的取決於你;然而，一個簡單的方法來完成它會改變你的操作方法：

public ActionResult LookupGadgets(string type, string term) 
{ 
    var retValue = gadgetsRepository.AvailableGadgets 
     .Where(x => x.Type == type && x.Make.Contains(term)) 
     .OrderBy(x => x.Make) 
     .Select(r => new { Details = r.Make + " " + r.Model }); 
    return Json(retValue); 
} 

而稍微改變你的AJAX調用：

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("LookupGadgets", "Quote")', 
    dataType: "json", 
    data: { 
     type: $("#Type").val(), 
     term: request.term 
    }, 
    success: function (data) { 
     response($.map(data, function (c) { 
      return { 
       label: c.Details, 
       value: c.Details 
      } 
     })); 
    } 
});