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;
};