在 jQuery UI 自动完成中添加自定义属性

Question

在 jQuery UI 自动完成中，我只想添加我的自定义属性。但是，我尝试了下面的代码。这对我不起作用。它替换了整个 <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>

Answer 1

如果您想保持所有内容与原始输出相同然后添加 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);
};

Answer 2

这是我在最近的项目中使用的示例。希望这对你有所帮助

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

在 jQuery UI 自动完成中添加自定义属性

Add custom attribute in jQuery UI Autocomplete

jquery

jquery-ui-autocomplete