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

Question

我制作了一个相当定制的自动完成输入框，我希望具有与普通 HTML select 框选项列表相同的功能，其中您在边。我正在想象这个：

这可能吗？这是我现在设置盒子的方式：

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

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

Is it possible to have a JQuery autocomplete sub text on the options list?

javascript

jquery

jquery-ui-autocomplete