Добавить пользовательский атрибут в автозаполнение пользовательского интерфейса jQuery - PullRequest
Новая
       28

Добавить пользовательский атрибут в автозаполнение пользовательского интерфейса jQuery

2 голосов
/ 19 сентября 2019

В автозаполнении пользовательского интерфейса jQuery я просто хочу добавить свой собственный атрибут.Но я попробовал ниже код.Это не работает для меня.Это было заменено целым <li> html содержимым.

Что я пробовал: 

.data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li>").attr( "data-id",item.value).append(item.label).appendTo(ul);
        };

Вывод вышеуказанного кода: 

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; width: 562px; top: 592px; left: 767px;">
   <li data-id="220">Que 1</li>
   <li data-id="219">Que 2</li>
   <li data-id="218">Que 3</li>
   <li data-id="217">Que 4</li>
</ul>

Визуализированный HTML (по умолчанию код jQuery UI Autocomplete ): 

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; width: 562px; top: 593px; left: 767px;">
   <li class="ui-menu-item" role="presentation"><a id="ui-id-2" class="ui-corner-all" tabindex="-1">Que 1</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-3" class="ui-corner-all" tabindex="-1">Que 2</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-4" class="ui-corner-all" tabindex="-1">Que 3</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-5" class="ui-corner-all" tabindex="-1">Que 4</a></li>
</ul>

Ожидаемый результат: 

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; width: 562px; top: 593px; left: 767px;">
   <li class="ui-menu-item" role="presentation"><a id="ui-id-2" class="ui-corner-all" tabindex="-1" data-id="220">Que 1</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-3" class="ui-corner-all" tabindex="-1" data-id="221">Que 2</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-4" class="ui-corner-all" tabindex="-1" data-id="222">Que 3</a></li>
   <li class="ui-menu-item" role="presentation"><a id="ui-id-5" class="ui-corner-all" tabindex="-1" data-id="223">Que 4</a></li>
</ul>

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

Если вы хотите сохранить все то же самое, что и исходный вывод, а затем добавить data-id, вам нужно снова построить целое <li>, поскольку вы переопределяете функцию рендеринга по умолчанию.

Итак, вы бы сделали: 

.data("ui-autocomplete")._renderItem = function (ul, item) {
    const htmlstring = `<li class="ui-menu-item" role="presentation"><a class="ui-corner-all" tabindex="-1"></a></li>`;
    const $li = $(htmlstring);
    const id = $(ul).find('li').length + 1;
    $li.find('a').attr("data-id", item.value).attr("id", id).html(item.label);
    return $li.appendTo(ul);
};
0 голосов
/ 19 сентября 2019

Вот пример, который я использовал в недавнем проекте.Надеюсь, это поможет вам 

var $project = $('#search-input');
    $project.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            var $li = $('<li>'),
            $li.attr('data-id', item.value);
            $li.append('<a href="http://example.com/product/'+item.id+'"><span>');
            $li.append('<span class="autocomplete_detail">'+item.value+'</span>');    
            return $li.appendTo(ul);
          };
...