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

Question

I made a fairly customized autocomplete input box, and I'd like to have the same functionality as the normal HTML select box options list where you have the gray little helper text on the side. I'm picturing this:

Is that possible? Here's how I have my box set up now:

 $(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

Yes, this can be accomplished using the autocomplete widget's _renderItem() extension point. Specifying your own custom function here allows you to override the widget's default behavior for creating and appending the autocomplete menu's <li> elements:

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

Of course, you will have to apply the styling and positioning of your choice to the inner <span> element in order to achieve the visual effect you are looking for.