是否可以在选项列表中添加JQuery自动完成子文本？

Question

我制作了一个相当自定义的自动填充输入框，并且我希望具有与普通HTML选择框选项列表相同的功能，其中您在侧面有灰色的小助手文本。我想象一下：

这可能吗？这就是我现在如何设置我的盒子的方法：

＆＃13;

＆＃13;

$(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);
  });
},

...

＆＃13;

＆＃13;

＆＃13;

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>元素，以实现您正在寻找的视觉效果。