jQuery autocomplete multiple fields

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 в моей консоли. Я знаю причину, по которой я ошибаюсь (я считаю, что это связано с тем, что они являются разными продуктами питания, а не «меткой»).

Вот мой 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 при создании автозаполнения должен быть либо массивом строк со значениями, либо строкой для URL-адреса с ответом JSON, который содержит значения или обратный вызов функции, который принимает пару параметров запроса и ответа ,

Способ, которым вы присвоили 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

Я действительно пробовал об этом по-другому. Мне удалось вытащить все ключи в один массив и использовать это как источник. второе поле заполняется на основе значения первого поля в событии 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; 
};