将 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,
        ...
        }
);