jQuery UI MVCでオートコンプリートを実行すると、返されたアイテムが表示されません

Question

私は今この問題に対して長らく頭を悩まされていますが、何が間違っているのか分かりません。

jquery ui autocompleteを使用して、関連するID値とともにクライアント名を返すという、私のコントローラの1つに対する非常に単純なJSON呼び出しがあります。私はFirebugで結果を見ることができますが、オートコンプリートは常に空のリストを返しています。

jqueryによって生成されたリスト内の項目の数は正しいです。たとえば、3つの結果が返された場合、3つの空のリスト項目を含む提案メニューが表示されます。問題は、jqueryが自分の応答を正しく解析しないことが原因です。

jqueryはテキストボックスで検証していません。ここでは他の質問もあります。

違いがある場合は、ローカルで実行しています。以下は

私が使用しjqueryの/ HTMLです：私のコントローラは、このようなものになります

<script src="https://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript">  google.load("jquery", "1.6.4")</script> 
<script type="text/javascript">  google.load("jqueryui", "1.8.16")</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#clientEntered").autocomplete({ 
      source: '@Url.Action("ClientAutoSuggest", "Clients")' 
     }); 
    }); 

</script> 

<input type="text" name="clientEntered" id="clientEntered" /> 

：前述したように

public JsonResult ClientAutoSuggest(string term) 
    { 
     var filteredClients = (from c in clientService.GetClients() 
           where c.Name.ToLower().StartsWith(term.ToLower()) 
           select new { ClientID = c.ClientID, Name = c.Name }).Take(10); 

     return Json(filteredClients, JsonRequestBehavior.AllowGet); 
    } 

を、私はFirebugのに戻って渡された結果が、生成されたリストを参照しています常に空です。

例 - 2個の結果が返された場合、私はFirebugの中2件の結果が表示されます。

<ul style="z-index: 1; top: -16px; left: 0px; display: block; width: 1864px; position: relative;" aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"><li></li><li></li></ul> 

：

[{"ClientID":1,"Name":"Client 1"},{"ClientID":2,"Name":"Client 2"}] 

私は、次の（正しい2つの項目が、空白）を参照してください生成されたソースを見ると

私はレスポンスの解析にさまざまな設定を試しましたが、私が試したことは何も動作していないようです。どんな提案や助けも素晴らしいだろう、ありがとう！

編集：下記のKevinの答えに感謝します。問題は、応答を正しくマッピングしていないことになりました。以下のコードはすごくうまくいきます。

$("#clientEntered").autocomplete({ 
      source: function(request, response) { 
      $.ajax({ 
       url: '@Url.Action("ClientAutoSuggest", "Clients")', 
       data: request, 
       dataType: "json", 
       type: "POST", 
       success: function(data){ 
        response($.map(data,function(item){ 
        return { label: item.Name,value: item.Name, id: item.ClientId } 
        })); 
       } 
      }); 
      }, 
     }); 

Answer 1

実際にオートコンプリートJSはありませんか？あなたはたぶんそれを別の場所に持っているかもしれませんが、あなたに知らせたいと思っていました。

実際の問題はおそらくあなたの '@ Url.Action'によって引き起こされます。そのアクションを実行して結果を返します。 * がテキストボックスにマッピングされていません。

ベストプラクティスは、単純なAjax呼び出しを行い、応答を受け取ったときにマッピングを行うだけです。あなたの助けケビンため

$("#clientEntered").autocomplete({ 
      source: function(request,response) 
      { 
       $.ajax({ 
       url: "/Clients/ClientAutoSuggest", 
       type:"POST", 
       dataType:"json", 
       data: { term: request.term }, 
       success:function(data){ 
        response($.map(data,function(item){ 
         return { label: item.Name,value: item.Name, id: item.ClientId 
        })) 
       } 

       }) 
      } 
});