jQuery自动完成多个字段

Question

我有以下AJAX响应，这是一个包含食品和价格的对象。

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

我正在尝试构建一个表单，其中用户输入一个项目和“价格”。输入字段自动填充。我浏览了jQuery文档，我很困惑如何让Item输入框只能查找＆＃39; food＆＃39;数组中的项目（或键）。

我在我的控制台中获得this.source is not a function。我知道我出错的原因（我相信这是因为他们的钥匙是不同的食品，而不是标签＆＃39;）。

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

请告诉我如何解决这个问题。