有没有办法使用jQuery UI自动完成的jQuery模板（官方插件）？ [英] Is there a way to use jQuery templates (official plugin) with jQuery UI Autocomplete?

问题描述

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

I've found this "hack" to use jTemplates with the jQuery UI Autocomplete:

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

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

but, is there a way to use the official jQuery template plugin with jQuery UI Autocomplete? I would just use the demo in the link, but prefer a cleaner method if possible.

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

(It's necessary to use templates because I'm using them elsewhere in the site and would like to use the consistent layout for the autocomplete items without having to maintain two versions.)

推荐答案

好的，jQuery UI使这个非常容易。来自 http://jqueryui.com/demos/autocomplete/#custom-data <页面上的演示/ a>，你可以改变.data（）调用：

OK, jQuery UI makes this extremely easy. From the demo on page http://jqueryui.com/demos/autocomplete/#custom-data, you can just alter the .data() call:

//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（）电话：

and replace it with this .data() call:

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

and here's the working code in a fiddle: http://jsfiddle.net/swatkins/XXeDd/

这篇关于有没有办法使用jQuery UI自动完成的jQuery模板（官方插件）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！