使用JSON請求的jQuery自動完成問題

我在使用我的自動完成功能時遇到了一些麻煩。我已成功導入jQuery UI.js，並且我的/form/ajaxcall文件正在返回有效的JSON數據，但問題出在篩選下拉結果時。使用JSON請求的jQuery自動完成問題

方法調用：

$("[data-maskattribute=autocomplete]").autocomplete({ 
     source: "/form/ajaxcall", 
    });

我ajaxcall文件：

[{"label":"Brasil","value":1},{"label":"USA","value":2},{"label":"Portugal","value":3}]

所以，我的下拉由具有：

巴西，美國，葡萄牙。

問題是：當我在輸入框中輸入美國（或任何東西）時，下拉菜單顯示所有結果。如果我只輸入美國，它應該只顯示美國，如果我把asdf它不應該顯示任何東西，對吧？如果我把一些手動數據放在上面，那就行了。也許是我的代碼缺少的東西？

我注意到這是一個常見的問題，通過我看到很多關於它的問題，但我不能繼續給出的答案，我不熟悉AJAX/JSON的工作。以下是其中之一。

jquery autocomplete json

在此先感謝和抱歉任何錯誤。

來源

2014-08-27 Victor Alencar Santos

在遠程場景中，實際的過濾必須發生在服務器端。如果您的服務器始終返回相同的值，那麼無論您在自動填充中輸入什麼內容，都會看到相同的確切值。我創建的代碼簡單jsfiddle從documentation：

$(function() { 
    $("#city").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "http://gd.geobytes.com/AutoCompleteCity", 
       dataType: "jsonp", 
       data: { 
        q: request.term 
       }, 
       success: function(data) { 
        console.log(data); 
        response(data); 
       } 
      }); 
     }, 
     minLength: 3, 
    }); 
});

如果你在文本輸入類型「USA」，控制檯會告訴你數據的陣列中，從服務器來了。在網絡標籤中，您會看到該請求包含「USA」字符串作爲參數。你應該在你的服務器端使用它來完成過濾。

編輯：

我還以爲你也許要首先加載國家的整個列表，然後只用它自動完成下線。如果是這樣，那麼你應該重寫你的代碼是這樣的：

$.get("/form/ajaxcall", function(data) { 
     $("#city").autocomplete({ source: data }); 
});

查看更新後的demo。我仍然在那裏發出Ajax請求，但是你可以用你的代碼進行更新。

來源

2014-08-27 16:16:40

你好@Ilya！非常感謝答覆。我做了以下步驟，但它仍然不起作用，請讓我知道如果我做錯了什麼： 1 - 我使用第一個功能，只把我的領域在.autocomplete功能，並切換ajax URL。現在下拉列表不會彈出。 2 - 我嘗試了第二個函數（$ .get ...），但是當我運行時，控制檯拋出一個錯誤：Uncaught TypeError：對象不是jquery-ui在第6行的函數 3 - 關於服務器端過濾。如果這是問題，您能否給我一些關於ASP.NET MVC 4的信息？謝謝！ – 2014-08-27 18:10:49

@VictorAlencarSantos第二個選項：你是否包含正確順序的腳本（第一個是jQuery，第二個是jquery-ui）？嘗試使用[更新的函數]（http://jsfiddle.net/q6ugxo7t/2/）（但使用您的實際'data'而不是我的虛擬）。 – 2014-08-27 19:07:38

嘿@Ilya！現在它的工作......不知道到底是什麼錯誤，但你的功能做到了訣竅......謝謝！ – 2014-08-28 13:11:48

使用JSON請求的jQuery自動完成問題

回答

相關問題