使用JSON時JQuery自動完成不起作用

我想使自動完成文本字段顯示名稱並在選擇其中一個時獲取值。使用JSON時JQuery自動完成不起作用

我可是從這個網站

和成功後的教程。工作代碼是這樣的：

var data = [ 
     { value: "AL", label: "Alabama" }, 
     { value: "AK", label: "Alaska" }, 
     { value: "AZ", label: "Arizona" } 
]; 
$(function() { 
     $("#autocomplete2").autocomplete({ 
      source: data, 
      focus: function(event, ui) { 
       event.preventDefault(); 
       $(this).val(ui.item.label); 
      }, 
      select: function(event, ui) { 
       event.preventDefault(); 
       $(this).val(ui.item.label); 
       $("#autocomplete2-value").val(ui.item.value); 
      } 
     }); 
    });

我想用我的JSON替換上面寫的var數據。這裏是我的JSON的樣子

[{"value":"1","label":"Gambir"},{"value":"2","label":"Kebon Kelapa"},{"value":"3","label":"Petojo Utara"}]

我想這樣做

var data = [ 
     here would be data from my json, 
     the JSON url: app.base_url+'adm/pengiriman/pengiriman_kodepos' 
     how to write code to retrieve JSON in here? 
]; 
$(function() { 
    $("#autocomplete2").autocomplete({ 
     source: data, 
     focus: function(event, ui) { 
      event.preventDefault(); 
      $(this).val(ui.item.label); 
     }, 
     select: function(event, ui) { 
      event.preventDefault(); 
      $(this).val(ui.item.label); 
      $("#autocomplete2-value").val(ui.item.value); 
     } 
    }); 
});

但是，什麼是這樣做的正確方法？我嘗試從這個修改源：

source: data,

變成這樣：

source: function (request, response) { 
    $.getJSON(app.base_url+'adm/pengiriman/pengiriman_kodepos', function (data) { 
     response($.map(data, function (value, key) { 
      return { 
       label: value, 
       value: key 
      }; 
      })); 
    }); 
},

或本：

source: function(request, response) { 
       $.ajax({ 
       url: app.base_url+'adm/pengiriman/pengiriman_kodepos', 
       dataType: "json", 
       data: { q: request.term }, 
       success: function(data) { 
        response($.map(data, function(value,key) { 
        return { label:value.label , value: value.value } 
        })); 
       } 
       }); 
      },

或本：

source: app.base_url+'adm/pengiriman/pengiriman_kodepos',

仍然沒有運氣..我很新的JQuery a nd也JSON 感謝您的任何幫助..

來源

2017-02-12 don gun

ajax請求是異步的，所以您必須使用回調並在其中創建自動完成UI。請參閱下面的代碼。沒有測試過，所以你可能不得不調整代碼，但這是如何做到的。

function getData(responseCallback) { 
    $.getJSON(app.base_url + 'adm/pengiriman/pengiriman_kodepos', function(data) { 
    responseCallback(data); 
    }); 
} 


function createAutocomplete(data) { 
    $("#autocomplete2").autocomplete({ 
    source: data, 
    focus: function(event, ui) { 
     event.preventDefault(); 
     $(this).val(ui.item.label); 
    }, 
    select: function(event, ui) { 
     event.preventDefault(); 
     $(this).val(ui.item.label); 
     $("#autocomplete2-value").val(ui.item.value); 
    } 
    }); 
} 

getData(createAutocomplete);

我已經在這裏創造一個例子：https://jsbin.com/subihohuje/1/edit?html,output

它從獲取數據：https://jsonblob.com/api/9ae66445-f11b-11e6-901d-295e753a8fe1

來源

2017-02-12 10:21:16 Diode

感謝您的回覆。我嘗試的代碼，沒有工作，沒有錯誤.. 和你是什麼意思通過調整代碼？是，任何可能的方式來獲得一個JSON數組，並把它來替換代碼 VAR數據= [ {值：「AL」，標籤：「亞拉巴馬」}， {值：「AK」，標籤：「Alaska」}， {value：「AZ」，標籤：「Arizona」} ]; –

如果您可以創建一個'jsbin'或'jsfiddle'，它可以很快解決。 – Diode

因爲對服務器發出的請求是異步的，所以你不能直接用json替換'data'。 – Diode

不知道你的意思。只需用json替換json

來源

2017-02-12 10:17:33 Nothing

那是我真正想做的事情。替換變量數據=值=「AL」，標籤：「阿拉巴馬」}， {值：「AK」，標籤：「阿拉斯加」}， {值：「AZ」，標籤：「亞利桑那州」} ]; 與我的JSON從網址： app.base_url +'adm/pengiriman/pengiriman_kodepos' 我會繼續嘗試 –

使用JSON時JQuery自動完成不起作用

回答

相關問題