Question

我指的是这个插件：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>

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

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

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

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

Answer 2

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

诀窍是：

使用此jquery扩展名：github Code

然后在自动填充选项中传递

html:true

...autocomplete({
...
html:true
...
}

）;

现在，您可以在JSON输出的“label”字段中传递html（例如＆lt; div＆gt; sample＆lt; / div＆gt;）以进行自动完成。

如果您不知道如何将插件添加到JQuery，那么：

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

发布日期：2013年7月28日

Answer 3

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

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

Answer 4

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

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

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

4 个答案: