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

Question

我发现这个“黑客”使用 jTemplates 与 jQuery UI 自动完成：

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

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

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

Answer 1

好的，jQuery UI 让这变得非常简单。从页面上的演示 http://jqueryui.com/demos/autocomplete/#custom-data< /a>，您只需更改 .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/

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

           };

      }

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

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