Привязка динамического текстового поля автозаполнения jquery к json

Question

Я провел кучу поисков, но, похоже, никуда не попал.

У меня есть JSON, который выглядит как

[{"IngredientId":1,"IngredientName":"Butter","CategoryID":1},{"IngredientId":2,"IngredientName":"Sugar","CategoryID":1},{"IngredientId":3,"IngredientName":"Water","CategoryID":1},{"IngredientId":4,"IngredientName":"Salt","CategoryID":1}]

Я пытаюсь сделать 2 вещи. 1. Каким-то образом сохраните IngredientId из выбранного текстового поля автозаполнения и самое важное. Привязать автозаполнение к указанному выше json.

Это моя неудачная попытка связать значение

.autocomplete({
        source: ingredients,
        select: function (item) {
            console.log(item.IngredientId);
            return item.IngredientName;
        }

Может ли кто-нибудь помочь с правильным способом связывания с автозаполнением?

Спасибо

Answer 1

source свойство требует простой массив или массив объектов (или строку). При работе с массивом объектов они должны быть типа { 'value': 'some_val', 'label': 'some_label' }.

Если у вас нет контроля над этим массивом ингредиентов, вам, вероятно, следует отобразить его для работы с автозаполнением.

 var ingredients_ac = $.map( 
    ingredients,
    function( obj ) {
      return { value: obj.IngredientId, label: obj.IngredientName };
  } );

затем используйте новый массив с автозаполнением

.autocomplete({
        ...
        source: ingredients_ac,
        ...
        }
);