选项列表上是否可以包含JQuery自动完成子文本？

Question

我做了一个相当自定义的自动完成输入框，我想拥有与普通HTML选择框选项列表相同的功能，在该列表中，您的侧面是灰色的小助手文本。 我在想这个：

那可能吗？ 现在设置我的盒子的方法如下：

 $(input).autocomplete({ source: function(request, response){ $.get('/' + tableName + "/" + request.term, function(data){ var list = []; $.each(data, function(index, value){ list.push({'value': value.name, 'id': value.id, 'type': value.type, 'streetAddress': value.streetAddress, 'city': value.city, 'state': value.state, 'zip': value.zip }); }); response(list); }); }, ... 

Answer 1

是的，这可以使用自动完成窗口小部件的_renderItem()扩展点来完成。 在此处指定您自己的自定义函数，您可以覆盖小部件的默认行为，以创建和附加自动完成菜单的<li>元素：

$(input).autocomplete({
source: function(request, response){
    $.get('/' + tableName + "/" + request.term, function(data){
      var list = [];
      $.each(data, function(index, value){
        list.push({'value': value.name, 'id': value.id, 'type': value.type, 'streetAddress':        value.streetAddress, 'city': value.city, 'state': value.state, 'zip': value.zip });
      });
    response(list);
  });
},
_renderItem: function(ul, item) {
  return $("<li>")
    .append(item.label)
    .append("<span>Your styled helper text here</span>")
    .appendTo(ul);
},
...

当然，您必须将选择的样式和位置应用于内部的<span>元素，以实现所需的视觉效果。