3

在使用 jQuery UI 的自动完成功能时，我遇到了自定义属性的问题。出于某种奇怪的原因，自动完成功能不允许我对 or 使用 make 或 id 属性ui.item.make，ui.item.id但是当它设置为ui.item.label.

这是JSFiddle和我遇到的问题的一个例子。这是自动完成工作的另一个示例，但区别仅在于 label 属性。

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

4

3 回答 3

2

我相信默认识别的属性只包括标签和值。如果要使用自定义属性，则需要实现自定义数据属性。

看起来像这样：

$("#vehicle_make").autocomplete({
    source: carMake,
    delay: 0,
    minLength: 1,
    autoFocus: false,
    select: function(event, ui) {
      $('#vehicle_make').val(ui.item.make);
    }
  })
  .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.make+ "<br>" + item.id + "</a>" )
        .appendTo( ul );
    };

或通过jsfiddle

这应该允许您使用自定义属性访问 ui.item 对象。
（如果您不希望 id 可见，您可以使用列表项中的隐藏字段将其隐藏）

请参阅http://jqueryui.com/autocomplete/#custom-data。

于 2013-04-09T17:36:02.493 回答
2

您可以简单地预处理品牌列表（请参阅 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
               }
    }))
},
于 2013-04-09T18:37:23.823 回答
0

根据API文档：

数组：数组可用于本地数据。有两种支持的格式： ...

具有标签和值属性的对象数组： [ { label: "Choice1", value: "value1" }, ... ]

因此，它要求它们像这样专门命名。

于 2013-04-09T17:34:36.463 回答