Question

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

以下是JSFiddle，其中列举了我遇到的问题。这是自动完成工作的另一个example，但不同之处仅在于label属性。

任何有关使用自定义属性的信息都不适合我，我们将不胜感激。

Answer 1

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

看起来像这样：

$("#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。

Answer 2

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

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
               }
    }))
},

Answer 3

根据API文档：

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

具有标签和值属性的对象数组：[{   label：“Choice1”，值：“value1”}，...]

因此，它要求它们具体命名为。

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

3 个答案: