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