jQuery UIオートコンプリートでサーバーからの応答がフィルタリングされない

Question

jQueryUI AutoCompleteを使用していますが、ユーザーがテキストボックスに入力するときにフィルタリングが行われないという点で小さな問題があります。

基本的には、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 
     }); 
    } 
}); 

データセットが大きい場合は、この戦略を避けて、コントローラアクションでフィルタリングを実行することができます。このフィルタリングの仕組みは、あなた次第です。しかし、それを達成するための簡単な方法は、あなたのアクションメソッドを変更するには、次のようになります。

$.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 
      } 
     })); 
    } 
});