如何格式化JQueryUI自动填充响应？

Question

我正在尝试创建一个自动完成小部件，它将显示匹配项目的名称和简短描述。

例如，如果我输入“America”，它将显示“North America - 美洲的北部次大陆”。和“南美美洲 - 美洲南部次大陆”。

我已经成功地完成了它，所以我的数据库将返回带有id，value（项目名称，例如北美和desc（简短描述，例如“北亚大陆...”）的适当JSON响应，我只是需要帮助的格式返回的结果为

<li><strong>value<strong><br><p>desc</p></li> 

，而不是仅仅

<li>value</li>

非常感谢提前。

P.S.我一直在寻找堆栈溢出的答案，但我发现的答案涉及formatResult和其他不再支持的方法。

Answer 1

http://jqueryui.com/demos/autocomplete/#custom-data - jquery ui网站上的自定义数据示例，您试图实现什么？

Answer 2

这可能会有所帮助，看看。数据（）：

$("#project").autocomplete({ 
     minLength: 0, 
     source: projects, 
     focus: function(event, ui) { 
      $("#project").val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $("#project").val(ui.item.label); 
      $("#project-id").val(ui.item.value); 
      $("#project-description").html(ui.item.desc); 
      $("#project-icon").attr("src", "images/" + ui.item.icon); 

      return false; 
     } 
    }) 
    .data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item.label + "<br>" + item.desc + "</a>") 
      .appendTo(ul); 
    }; 

Answer 3

您应该能够使用正则表达式如下实现你正在寻找的结果。

item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) { 
    return '<strong>' + match + '</strong>'; 
}); 

完整的例子如下。

$("#project").autocomplete({ 
      minLength: 0, 
      source: projects, 
      focus: function(event, ui) { 
       $("#project").val(ui.item.label); 
       return false; 
      }, 
      select: function(event, ui) { 
       $("#project").val(ui.item.label); 
       $("#project-id").val(ui.item.value); 
       $("#project-description").html(ui.item.desc); 
       $("#project-icon").attr("src", "images/" + ui.item.icon); 

       return false; 
      } 
     }) 
     .data("autocomplete")._renderItem = function(ul, item) { 
      var term = this.term, 
         formattedLabel = item.label.replace(new RegExp('(' + term + ')', 'ig'), function ($1, match) { 
          return '<strong>' + match + '</strong>'; 
         }); 
      return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + formattedLabel + "<br>" + item.desc + "</a>") 
       .appendTo(ul); 
     };