Existe-t-il un moyen d’utiliser les modèles jQuery (plug-in officiel) avec la saisie semi-automatique de l’interface utilisateur jQuery?

J’ai trouvé ce “bidouillage” pour utiliser jTemplates avec la saisie semi-automatique de jQuery UI:

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

mais, existe-t-il un moyen d’utiliser le plug-in de modèle officiel jQuery avec l’autocomplétion de l’interface utilisateur jQuery? Je voudrais juste utiliser la démo dans le lien, mais préfère une méthode plus propre si possible.

(Il est nécessaire d’utiliser des modèles car je les utilise ailleurs sur le site et j’aimerais utiliser la mise en page cohérente pour les éléments à remplissage automatique sans devoir conserver deux versions.)

OK, jQuery UI rend cela extrêmement facile. À partir de la démonstration à la page http://jqueryui.com/demos/autocomplete/#custom-data , vous pouvez simplement modifier l’appel .data ()

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

et le remplacer par cet appel .data ():

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

et voici le code de travail dans un violon: http://jsfiddle.net/swatkins/XXeDd/

J’ai cherché quelque chose de similaire avec le guidon …. alors le voici:

html:

    
{{label}} "----" {{value}}

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.comstack(tmplAutocompleate); var html = template(item); return $(html).appendTo(ul); }; }

J’ai utilisé un modèle de soulignement et j’ai eu beaucoup de problèmes à le faire fonctionner avec la saisie semi-automatique à l’aide de la méthode ci-dessus. Les data('ui-autocomplete-item', item ) (anciennement “item.autocomplete”) supprimées dans l’exemple ci-dessus sont toujours obligatoires. J’ai pu le conserver en utilisant la méthode suivante.

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

J’espère que cela aide quelqu’un.