選項列表上是否可以包含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>元素，以實現所需的視覺效果。