jQuery自動完成多個字段

Question

我有下面的AJAX響應，它是一個包含食品和價格的對象。

{
   "pizza": "100.00", 
   "Burger": "45.00", 
   "Ice Cream": "25.00", 
   "Chips": "20.00", 
   "Peanut Butter": "50.00"
}

我正在嘗試構建一個表單，其中用戶輸入一個項目，並且“價格”輸入字段會自動填寫。 我遍歷了jQuery文檔，我對如何使Item輸入框僅在數組中查找“食物”項（或鍵）感到困惑。

我得到一個this.source is not a function在我的控制台中this.source is not a function 。 我知道我要出錯的原因（我相信這是由於它們的鍵是不同的食物而不是“標簽”）。

這是我的js

$(document).ready(function(){

    var myItems = getData();

    $('#Item').autocomplete({
        source: myItems,
        focus: function(event,ui){
          $('#Item').val(ui.item.Item);
          return false;
        },
        select : function(event,ui){

          $('#Rate').val(ui.item.Price);
        }
    });
});

function getData(){
    var myItems = {};
    $.ajax({
        type : 'GET',
        async: false,
        url : 'http://127.0.0.1:8000',
        data : {},
        contentType: "application/json",
        crossDomain:true,
        success : function(json){
          for(i = 0; i <json.length; i++){
            myItems[json[i].Item] = json[i].Price;    
            //below doesn't work in loop
            // myItems['Item'] = json[i].Item;
            // myItems['Price'] = json[i].Price;
          }
        },
        error : function(response){
          console.log('error')
        }
    });
    // console.log('Is this working '+ myItems);
    console.log(myItems);
    return myItems;
};

請讓我知道如何解決此問題。

Answer 1

創建自動完成功能時， source選項必須是帶有值的字符串數組，帶有JSON響應（包含值）的url的字符串或帶有一對請求和響應參數的函數回調。

您的分配方式var myItems = getData(); 表示myItems不是這些類型之一。 當前它將是一個空對象，因為它是在Ajax調用完成之前分配的。

假設您只需要加載一次數據，請在Ajax請求的成功回調中創建自動完成功能；

$(document).ready(function(){

    getData();

    function getData(){
        $.ajax({
            type : 'GET',
            async: false,
            url : 'http://127.0.0.1:8000',
            data : {},
            contentType: "application/json",
            crossDomain:true,
            success : function(json){
                var myItems = {};
                for(i = 0; i < json.length; i++){
                    myItems[json[i].Item] = json[i].Price;    
                }
                $('#Item').autocomplete({
                    source: myItems,
                    focus: function(event,ui){
                        $('#Item').val(ui.item.Item);
                        return false;
                    },
                    select : function(event,ui){
                        $('#Rate').val(ui.item.Price);
                    }
                });
            },
            error : function(response){
                console.log('error')
            }
        });
    };

});

Answer 2

我實際上嘗試過另一種方式。 我設法將所有鍵拉入單個數組並將其用作源。 根據選擇事件中第一個框的值填充第二個框。

$(document).ready(function(){

  var myItems = getData();

  var keys = [];
  for(var k in myItems){
    keys.push(k);
  }

  $('#Item').autocomplete({
    source: keys,
    select : function(e,ui){
      var value =  myItems[ui.item.value];
      $('#Rate').val(value);
    }
  });
});

function getData(){
  var myItems = {};
  $.ajax({
    type : 'GET',
    async: false,
    url : 'http://127.0.0.1:8000',
    data : {},
    contentType: "application/json",
    crossDomain:true,
    success : function(json){
      for(i = 0; i <json.length; i++){
        myItems[json[i].Item] = json[i].Price;
      }
    },
    error : function(response){
      console.log('error')
    }
  });
  // console.log(myItems);
  return myItems;
};