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

Jquery autocomplete - custom html for result listing

提问by odle

I am referring to this plugin: http://jqueryui.com/demos/autocomplete/

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

So the original structure for the results is

所以结果的原始结构是

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

I need to make the links inside to look something like this:

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

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

Please don't tell me the only solution it to edit the plugin because i don't want the same format for all autocompletes on the site.

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

回答by Andrew Whitaker

You need to replace the _renderItemmethod (for the autocomplete in question):

您需要替换该_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 );
   };

(assuming the itemsin your sourcehave a property called customattribute)

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

As shown in this example: http://jqueryui.com/demos/autocomplete/#custom-data

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

回答by Wasiq

This is also documented in jquery-ui autocomplete documentation at: Jquery-autocomplete.

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

The trick is:

诀窍是：

1. Use this jquery extension: github Code

2. Then in autocomplete option pass

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

   );

3. Now you can pass html(like <div>sample</div>) in "label" field of JSON output for autocomplete.

1. 使用这个 jquery 扩展：github 代码

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

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

   );

3. 现在您可以在 JSON 输出的“标签”字段中传递 html（如 <div>sample</div>）以进行自动完成。

If you don't know how to add the plugin to JQuery then:

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

1. Save the plugin(Scott González' html extension) in a js file or download the js file.
2. You have already added the jquery-ui autocomplete script in your html page(or the jquery-ui js file). Add this plugin script after that autocomplete javascript file.

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

Post date: 28th July, 2013

发布日期：2013 年 7 月 28 日

回答by Galled

You could try add the attributes with the event "open":

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

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

回答by Jamshaid Kamran

You can use createevent for autocomplete for newer versions. Like this:

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

For full code review, I am attaching the way I bound autocomplete to my textbox.

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

$('.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
            };
        }
});