jQueryUI + ASP .NET MVCがjsonデータでオートコンプリートする

Question

jQueryUIのオートコンプリートを使用してJSONを呼び出すのに大きな問題があります。 私はこの非常に単純なJSがあります。

$(document).ready(function() { 
    $('#Editor_Tags').autocomplete({ 
     source: "/Forums/Ajax/GetTags", 
     focus: function() { 
      // prevent value inserted on focus 
      return false; 
     }, 
     select: function (event, ui) { 
      var terms = split(this.value); 
      // remove the current input 
      terms.pop(); 
      // add the selected item 
      terms.push(ui.TagName); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(", "); 
      return false; 
     } 
    }); 
}); 

をそして、これは私が返すようにしようとしているモデルである：

public class TagView 
{ 
    public int TagId { get; set; } 
    public string TagName { get; set; } 
    public int Weight { get; set; } 
} 

しかし、それが主な問題ではありません。 主な問題は、私が入力を開始すると、jQueryはコントローラに要求しません。私は100％確信しています.URLが良いと思っています。/Forums/Ajax/GetTagsと入力することで、私は手動でコントローラにアクセスできますか？term = text そして結果が得られます。 私はjQueryとjQUIのnewset版をGoogleのCDNに直接使用しています。

Answer 1

jQueryUIオートコンプリートウィジェットはsourceパラメータのデータが次の要件を満たすことを期待：

[..]ストリングの単純な配列、またはそれ を有する、 配列内の各アイテムのためのオブジェクトが含まれていますラベルまたは値 のいずれか、またはその両方を指定します。

だから、あなたは2つのオプションがあります。

1. 変更するには、これらの要件を満たすためにJSONにシリアライズしているのviewmodel：

   public class TagView 
   { 
       public string Label { get; set; } 
       public string Value { get; set; } 
   } 
   

2. 変化であるとオートコンプリートウィジェットのsourceパラメータをあなたがAJAX呼び出しを自分で行い、データを適切にフォーマットする関数：

   $("#Editor_Tags").autocomplete({ 
       source: function (request, response) { 
        $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) { 
         response($.map(data, function (el) { 
          return { 
           label: el.TagName, 
           value: el.TagId 
          }; 
         })); 
        }); 
       }, 
       /* other autocomplete options */ 
   }); 
   

   これは、サーバーから返されたデータがTagViewオブジェクトのJSON配列であることを前提としています。

2番目のコードはテストされていませんが、少なくとも正しい方向に進むはずです。

Answer 2

私はこのコードでの作業、それを持っている：

$('#Editor_Tags').autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "/Forums/Ajax/GetTags", 
      dataType: "json", 
      data: { 
       term: request.term 
      }, 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { 
         label: item.TagName, 
         value: item.TagName 
        } 
       })); 
      } 
     }); 
    } 

}); 

essentialyアンドリューが掲載したものからその切り抜いされていません。