如何在 JQuery UI 自动完成中添加一个 html 元素？

Posted 2023-05-08

【中文标题】如何在 JQuery UI 自动完成中添加一个 html 元素？

【英文标题】：How to add an html element in JQuery UI Autocomplete?

【发布时间】：2020-08-16 09:57:15

【问题描述】：

我最近使用了 Jquery UI 自动完成功能，想知道如何在列表顶部添加标题。

这是我想用 Suggestions 作为标题来实现的目标：

到目前为止，这是我的脚本：

$(document).ready(function() 

$('.search').autocomplete(
source: 'search.php',
minLength: 1,
select: function(event,ui) 
var postid = ui.item.id;

if(postid != '') 
location.href = "post/" + postid;


);
);

我想加<span>Suggestions</span>。

【参考方案1】：

看起来您需要通过覆盖自动完成项的呈现方式将其添加为“类别”（请参阅​​：https://jqueryui.com/autocomplete/#categories）。代码未经测试，但可能会让您走上正确的道路：

$('.search').autocomplete(
  source: 'search.php',
  minLength: 1,
  select: function(event,ui) 
    var postid = ui.item.id;

    if (postid != '') 
      location.href = "post/" + postid;
    
  ,

  _create: function() 
    this._super();
    this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
  ,
  _renderMenu: function( ul, items ) 
    var self = this;

    // Add your unselectable "category"
    ul.append( "<li class='ui-autocomplete-category'>SUGGESTIONS</li>" );

    // Add your other items
    $.each( items, function( index, item ) 
      self._renderItem( ul, item );
    );
  );
);