jquery - jQuery UI 自动完成中的自定义属性问题

Question

我在使用 jQuery UI 的自动完成功能时遇到了自定义属性的问题。由于某些奇怪的原因，自动完成功能不允许我使用 ui.item.make 或 ui.item.id 的 make 或 id 属性，但在以下情况下工作它被设置为ui.item.label。

这里是JSFiddle以我遇到的问题为例。这是另一个example自动完成功能的工作原理，但区别仅在于标签属性。

任何关于为什么使用自定义属性对我不起作用的信息将不胜感激。

Answer 1

您可以简单地预处理品牌列表(请参阅 forEach) - 如果您通过 ajax 获取数据，您也可以执行类似的操作。注意:我还在您的选择中添加了 return false，这样它就不会使用该值并使用您的 make。

var carMake = [{
    "make": "Smart",
        "id": '200038885'
}, {
    "make": "Bomb",
        "id": '200038885'
}, {

    "make": "Volkswagen",
        "id": '200000238'
}];

function addlabel(row) {
    row.label = row.make;
    row.value = row.id;
}
carMake.forEach(addlabel);
$("#vehicle_make").autocomplete({
    source: carMake,
    delay: 0,
    minLength: 1,
    autoFocus: false,
    select: function (event, ui) {
        $(this).val(ui.item.make);
        return false;
    }
});

编辑:Ajax数据注意:要使用ajax数据进行处理，这将是一种方法:

success: function (data) {
    response($.map(data, function (item) {
        return {
                 label: item.make
                 value: item.id,
                 make: item.make,
                 id: item.id
               }
    }))
},