Javascript jQuery自动完成多个字段

我有下面的AJAX响应，它是一个包含食物和价格的对象

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

我试图构建一个表单，其中用户输入一个项目，“价格”输入字段将自动填充。我浏览了jQuery文档，对于如何让ItemInputBox只查找数组中的“食物”项（或键）感到困惑

我得到一个

this.source不是我控制台中的函数。我知道我出错的原因（我相信这是因为钥匙和标签是不同的食物）

这是我的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;
};

$（文档）.ready（函数（）{
var myItems=getData（）；
$（“#项”）。自动完成({
资料来源：myItems，
焦点：功能（事件、用户界面）{
$（'#Item'）.val（ui.Item.Item）；
返回false；
},
选择：功能（事件、用户界面）{
$（#Rate'）.val（ui.item.Price）；
}
});
});
函数getData（）{
var myItems={}；
$.ajax({
键入：“GET”，
async:false，
网址：'http://127.0.0.1:8000',
数据：{}，
contentType:“应用程序/json”，
跨域：是的，
成功：函数（json）{
对于（i=0；i），创建自动完成时的选项需要是一个包含值的字符串数组、一个包含值的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')
            }
        });
    };

});

$（文档）.ready（函数（）{
getData（）；
函数getData（）{
$.ajax({
键入：“GET”，
async:false，
网址：'http://127.0.0.1:8000',
数据：{}，
contentType:“应用程序/json”，
跨域：是的，
成功：函数（json）{
var myItems={}；
for（i=0；i
实际上，我尝试了另一种方法。我成功地将所有键拉入一个数组并将其用作源。第二个框将根据select事件上第一个框的值填充

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

$（文档）.ready（函数（）{
var myItems=getData（）；
var键=[]；
for（myItems中的var k）{
按键。按（k）；
}
$（“#项”）。自动完成({
资料来源：钥匙，
选择：功能（e、ui）{
var value=myItems[ui.item.value]；
$（'#Rate'）.val（值）；
}
});
});
函数getData（）{
var myItems={}；
$.ajax({
键入：“GET”，
async:false，
网址：'http://127.0.0.1:8000',
数据：{}，
contentType:“应用程序/json”，
跨域：是的，
成功：函数（json）{
对于（i=0；我是..这很有意义。更改了..知道如何只获取自动完成的对象键吗？@Kunkka抱歉，刚刚编辑。我刚刚检查了API，我不确定您是否应该使用函数版本作为源。这取决于数据更改的频率。当源是一个函数时，每次击键都会调用它每次调用Ajax请求都会执行得非常糟糕。函数版本的想法是提供您自己的筛选。我仍然得到一个答案this.source不是函数。我怀疑的是$（'#Item'）.val（ui.Item.Item）行；，ui.item.item没有引用任何东西，是吗？因为它都是独立的食物名称？@Kunkka是什么给了你这个错误？你可以使用
typeof myItems
来检查它是否是一个函数。不过，你似乎是通过确保源是一个数组来工作的。