Question

我发现这个“hack”将jTemplates与jQuery UI Autocomplete一起使用：

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

但是，有没有办法在jQuery UI Autocomplete中使用官方jQuery模板插件？我只想在链接中使用该演示，但如果可能的话，更喜欢更简洁的方法。

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

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

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

希望这有助于任何人。

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

3 个答案: