jQuery自动完成-用于结果列表的自定义html

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。

窍门是：

1. 使用此jquery扩展名：github Code

2. 然后通过自动完成选项传递

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

   ）;

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

   sample div>）以实现自动填充。

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

   1. 将插件（ScottGonzález的html扩展名保存在js文件中或下载js文件。
   2. 您已经在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

您可以使用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
            };
        }
});