有没有办法将 jQuery 模板（官方插件）与 jQuery UI 自动完成一起使用？答案

【问题标题】：Is there a way to use jQuery templates (official plugin) with jQuery UI Autocomplete?有没有办法将 jQuery 模板（官方插件）与 jQuery UI 自动完成一起使用？
【发布时间】：2011-11-09 10:26:31
【问题描述】：

我发现这个“hack”可以将 jTemplates 与 jQuery UI 自动完成一起使用：

http://www.shawnmclean.com/blog/2011/02/using-jqueryui-autocomplete-with-jtemplates/

但是，有没有办法使用带有 jQuery UI 自动完成功能的官方 jQuery 模板插件？我只会使用链接中的演示，但如果可能的话，我更喜欢更简洁的方法。

（必须使用模板，因为我在网站的其他地方使用它们，并且希望对自动完成项目使用一致的布局，而不必维护两个版本。）

【问题讨论】：

天哪，我的博客正在帮助人们：O
是的，它是@ShawnMclean。我有机会更仔细地查看您的帖子，并将使用 jQuery 模板插件实现您的“hack”。一旦我有机会完成它，我会在这里发布我的代码。

标签： jquery jquery-ui jquery-plugins jquery-ui-autocomplete jquery-templates

【解决方案1】：

好的，jQuery UI 让这变得非常简单。在http://jqueryui.com/demos/autocomplete/#custom-data 页面上的演示中，您可以更改 .data() 调用：

//this is the original code in the demo
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
};

并用这个 .data() 调用替换它：

.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "#myTemplate" ).tmpl( item ).appendTo( ul );
};

// template
<script id="myTemplate" type="text/x-jquery-tmpl">
    <li><a>${label}<br />${desc}</a></li>
</script>

这是小提琴中的工作代码： http://jsfiddle.net/swatkins/XXeDd/

【讨论】：

感谢您发布解决方案！我在这里发布了一个后续问题：stackoverflow.com/questions/10966459/…

【解决方案2】：

我一直在寻找与车把类似的东西......所以这里是：

html:

 <li>
    <div class="myTemplate" >
        <li><a>{{label}} "----" {{value}}</a></li>
    </div>
</li>

js:

define([

    'jquery',
    'underscore',
    'backbone',
    'marionette',
    'handlebars',
    'filter_input',

    'text!modules/search/templates/search.html',
    'text!modules/search/templates/autocompleate.html',
    'jqueryui'
],

function($, _, Backbone, Marionette, Handlebars, filter_input, tmpl, tmplAutocompleate, jqueryui) {

 this.ui.search.autocomplete({

            source: availableTags, 
            delay: 500, 
           // minLength: 2,
            autoFocus: true,
            success: function (data) {
                    response(
                    $.map(data.campagins, function (item) {
                        return {
                            label: item.name,
                            status: item.status,
                            id: item.id
                        }
                    }))
                }

     }).data("autocomplete")._renderItem = function(ul, item) {

            var template = Handlebars.compile(tmplAutocompleate);
            var html = template(item);
            return $(html).appendTo(ul);

           };

      }

【讨论】：

【解决方案3】：

我使用了下划线模板，但在使用上述方法使其与自动完成功能配合使用时遇到了很多问题。上面示例中删除的data('ui-autocomplete-item', item )（正式名称为“item.autocomplete”）仍然是必需的。我可以使用以下方法将其保留。

.data("ui-autocomplete")._renderItem = function(ul, item) {
    return $('<li>').data('ui-autocomplete-item', item ).append(_.template($('#tmp').html(), item)).appendTo(ul);
};

希望这对任何人都有帮助。

【讨论】：