Как добавить элемент html в JQuery UI Autocomplete?

Question

Я недавно использовал автозаполнение пользовательского интерфейса Jquery и задавался вопросом, как добавить заголовок вверху списка.

Вот чего я хочу достичь с Предложения в качестве заголовка:

Вот мой сценарий:

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

I sh, чтобы добавить <span>Suggestions</span>.

Answer 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 );
    });
  });
});