jQueryUI + ASP使用json數據的.NET MVC自動完成

使用jQueryUI自動完成調用JSON真的很麻煩。我有這個相當簡單的JS：jQueryUI + ASP使用json數據的.NET MVC自動完成

$(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不會向控制器發出請求。我百分之百確信，這個網址是好的。因爲我可以通過鍵入/ Forums/Ajax/GetTags來手動訪問控制器？term = text 我得到了它的結果。我正在使用新版本的jQuery和jQUI直接從谷歌CDN rom。

來源

2011-07-02 Łukasz Baran

@Lukasz Baran：你在頁面上看到任何JavaScript錯誤？在Firebug中打開'console'選項卡時會發生什麼？是否有任何請求被髮送？ –

在firebug控制檯中，它看起來很好，並請求回收數據，但另一方面在Fiddler中，我沒有得到任何有關Ajax調用的結果。 –

jQueryUI的自動完成構件預計，在source參數數據，以滿足以下要求：

[..]字符串的簡單陣列，或者它包含對象爲陣列中的每個項目，與無論是標籤還是值屬性或兩者。

所以，你有兩個選擇：

更改你序列化到JSON的視圖模型，以滿足這些要求：

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

更改自動完成構件的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數組。

第二段代碼沒有經過測試，但至少應該讓您朝着正確的方向發展。

來源

2011-07-02 13:56:58

我已完成了與此代碼的工作：

$('#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是不是從什麼安德魯已經張貼不同勢。

來源

2011-07-02 14:49:15

jQueryUI + ASP使用json數據的.NET MVC自動完成

回答

相關問題