将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}]

我想做两件事。 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,
        ...
        }
);