使用ASP.NET web服務的jQuery AutoComplete（jQuery UI 1.8rc3）

Question

當前，我從使用.ashx處理程序返回XML時使用此版本的自動完成控件。該XML看起來是這樣的：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
<States> 
<State> 
    <Code>CA</Code> 
    <Name>California</Name> 
</State> 
<State> 
    <Code>NC</Code> 
    <Name>North Carolina</Name> 
</State> 
<State> 
    <Code>SC</Code> 
    <Name>South Carolina</Name> 
</State> 

自動完成的代碼如下所示：

$('.autocompleteTest').autocomplete(
    { 
     source: function(request, response) { 
      var list = []; 
      $.ajax({ 
       url: "http://commonservices.qa.kirkland.com/StateLookup.ashx", 
       dataType: "xml", 
       async: false, 
       data: request, 
       success: function(xmlResponse) { 
        list = $("State", xmlResponse).map(function() { 
         return { 
          value: $("Code", this).text(), 
          label: $("Name", this).text() 
         }; 
        }).get(); 
       } 
      }); 
      response(list); 
     }, 
     focus: function(event, ui) { 
      $('.autocompleteTest').val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $('.autocompleteTest').val(ui.item.label); 
      $('.autocompleteValue').val(ui.item.value); 
      return false; 
     } 

    }); 

由於種種原因，我寧願被調用一個ASP.NET Web服務，但我不能讓它工作。要通過改變服務（我在做本地服務，以保持它的簡單），自動完成代碼的開頭是：

$('.autocompleteTest').autocomplete(
    { 
     source: function(request, response) { 
      var list = []; 
      $.ajax({ 
       url: "/Services/GeneralLookup.asmx/StateList", 
       dataType: "xml", 

此代碼是頁面上的網站和GeneralLookup根.asmx位於名爲Services的子文件夾中。但是Web服務中的斷點永遠不會被觸發，並且不會生成自動完成列表。如果它的確與衆不同，這來自於ASMX的XML是：

<?xml version="1.0" encoding="utf-8" ?> 
<string xmlns="http://www.kirkland.com/"><State> <Code>CA</Code> <Name>California</Name> </State> <State> <Code>NC</Code> <Name>North Carolina</Name> </State> <State> <Code>SC</Code> <Name>South Carolina</Name> </State></string> 

功能等效的，因爲我從來沒有在映射代碼中使用根節點的名稱。我沒有看到jQuery文檔中有關從該控件調用.asmx服務的任何內容，但.ajax調用是.ajax調用，對吧？

我試過各種不同的路徑到.asmx（〜/ Services /），我甚至將服務移到了相同的路徑以消除這些問題。沒有任何運氣。

任何想法？

Answer 1

我通過使用JSON使自動完成與.asmx一起工作。下面是我做的一個例子：

的JavaScript：

$("#tbNameFilter").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "/Services/AutocompleteService.asmx/Aoi_Autocomplete", 
      data: "{ 'q': '" + request.term + "', 'limit': '10' }", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataFilter: function (data) { return data; }, 
      success: function (data) { 
       response($.map(data.d, function (item) { 
        return { 
         label: item.Name, 
         value: item.Name 
        } 
       })) 
      } 
     }); 
    }, 
    minLength: 1 
}); 

Web服務：

[WebMethod] 
public List<FAD_Aoi> Aoi_Autocomplete(String q, int limit)