Jquery 自动完成 - 结果列表的自定义 html

Posted 2023-03-05

【中文标题】Jquery 自动完成 - 结果列表的自定义 html

【英文标题】：Jquery autocomplete - custom html for result listing

【发布时间】：2011-12-06 11:54:31

【问题描述】：

我指的是这个插件：http://jqueryui.com/demos/autocomplete/

所以结果的原始结构是

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

我需要使里面的链接看起来像这样：

<a class="myclass" customattribute="something"> The item </a>

请不要告诉我编辑插件的唯一解决方案，因为我不希望网站上的所有自动完成都使用相同的格式。

【参考方案1】：

您需要替换 _renderItem 方法（用于有问题的自动完成）：

$("selector").autocomplete( ... )
   .data( "autocomplete" )._renderItem = function( ul, item ) 
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a class='myclass' customattribute='" + item.customattribute + "'>" + item.label + "</a>" )
            .appendTo( ul );
   ;

（假设您的source 中的items 有一个名为customattribute 的属性）

如本例所示：http://jqueryui.com/demos/autocomplete/#custom-data

【讨论】：

哦，伙计。我在那里的例子中错过了这一点。谢谢一千！效果很好。

@Andrew Whitaker +1 - 你为我省去了很多麻烦。我查看了api.jqueryui.com/autocomplete/#entry-examples 上的文档，但没有提及_renderItem。

【参考方案2】：

这也记录在 jquery-ui 自动完成文档中：Jquery-autocomplete。

诀窍是：

使用这个 jquery 扩展：github Code

然后在自动完成选项中通过

html:true

...autocomplete(
...
html:true
...

);

现在您可以在 JSON 输出的“标签”字段中传递 html（如

sample）以进行自动完成。

如果您不知道如何将插件添加到 JQuery 中：

将插件（Scott González 的 html 扩展名）保存在 js 文件中或下载 js 文件。 您已经在 html 页面（或 jquery-ui js 文件）中添加了 jquery-ui 自动完成脚本。在自动完成 javascript 文件之后添加这个插件脚本。

发布日期：2013 年 7 月 28 日

【讨论】：

这个解决方案就像一个魅力。只需在“src/autocomplete”中下载名为“jquery.ui.autocomplete.html.js”的文件。将脚本添加到您的 html 文件并按照上面的说明进行操作。我花了 1 分钟才让它工作。

完美！谢谢！

【参考方案3】：

您可以尝试使用“open”事件添加属性：

$( ".selector" ).autocomplete(
    open: function(event, ui) 
        var jArrEl = $("a.ui-corner-all");
        jArrEl.addClass("myclass");
        jArrEl.attr("customattribute","something");
    
);

【参考方案4】：

您可以使用create 事件来自动完成较新版本。像这样：

create: function () 
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) 
                var path = 'basepath' + item.value;
                return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            ;
        

对于完整的代码审查，我附上了我将自动完成绑定到我的文本框的方式。

$('.myTextBox').autocomplete(
        source: function (request, response) 

            // your call to the server
        ,
        select: function (event, ui) 
            // when item is selected
            $(this).val(ui.item.label);
        ,
        create: function () 
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) 
                var path = 'basepath' + item.value;

                 return $('<li class="divSelection">')
                    .append('<div>')
                    .append('<img class="zoom" src="' + path + '" />')
                    .append('<span>')
                    .append(item.label)
                    .append('</span>')
                    .append('</div>')
                    .append('</li>')
                    .appendTo(ul); // customize your HTML
            ;
        
);

【讨论】：

请注意 .append() 函数链不会产生所需的 DOM。见***.com/questions/41387738/…