使用WCF服務顯示帶有jQuery自動完成功能的數據？

我有一個數據庫的一些數據。我創建了一個使用jQuery Autocomplete從數據庫獲取所有名稱的WCF服務。我使用JSON獲得響應，但是我想在自動完成中顯示它。

這是我的jQuery的樣子：

$(function() { 
    function log(message) { 
     $("<div>").text(message).prependTo("#log"); 
     $("#log").scrollTop(0); 
    } 
    $("#city").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "/service.svc/GetData", 
       dataType: "jsonp", 
       data: { 
        DataName: request.term 
       }, 
       success: function (data) { 
        response(data); 
       } 
      }); 
     }, 
     minLength: 3, 
     select: function (event, ui) { 
      log(ui.item ? 
      "Selected: " + ui.item.label : 
      "Nothing selected, input was " + this.value); 
     }, 
     open: function() { 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    }); 
});

我是相當新的WCF和想知道下一步是什麼？我如何映射數據以便顯示它？

JSON數據輸出看起來像這樣：

{"GetDataResult":[{"Name":"Fran $","CategoryId":102,"dataId":1,"IndexId":16,"InsertedDate":null,"Manual":false}

來源

2015-02-09 user3410846

「GetData」服務的JSON看起來像什麼？自動完成期望它處於某種格式 – 2015-02-09 15:35:12

我編輯了第一篇文章。 – user3410846 2015-02-09 15:38:56

所以，爲了清楚起見，是否要顯示陣列中每個結果的'Name'作爲建議？ – 2015-02-09 15:40:04

自動完成插件希望你提供給response回調函數數組是在以下格式之一：

的陣列字符串，例如["Hello", "Goodbye"]
一組對象。每個對象必須至少有一個label屬性或value屬性。它也可能有其他屬性。

所以在您的情況，您可以：

編輯服務器端代碼返回JSON符合該控件需要的格式，或
傳遞之前修改結果回撥到response。

我將專注於＃2。執行此操作的規範方法是使用$.map將從服務器獲得的數組轉換爲正確的格式，然後將結果數組提供給response回調。

你的情況可能是這個樣子：

success: function (data) { 
    response($.map(data.GetDataResult, function (item) { 
     return { 
      label: item.Name, 
      value: item.dataId 
     }; 
    })); 
}

例子：http://jsfiddle.net/yntrp063/

注意，value屬性的值將文本框的內部使用您選擇item--後這可能不是你想要的。

來源

2015-02-09 15:59:19

我試過了，但我仍然沒有得到任何自動完成。儘管我仍然得到了json的迴應。 – user3410846 2015-02-09 16:29:28

@ user3410846那麼'success'回調會觸發？ – 2015-02-09 16:30:42

它仍然火災。所以它仍然給出迴應。但我必須使用firebug（Firefox）來查看輸入的結果... – user3410846 2015-02-09 16:33:44

使用WCF服務顯示帶有jQuery自動完成功能的數據？

回答

相關問題