Есть ли способ использовать шаблоны jQuery (официальный плагин) с jQuery UI Autocomplete? - PullRequest
Новая
       37

Есть ли способ использовать шаблоны jQuery (официальный плагин) с jQuery UI Autocomplete?

3 голосов
/ 02 сентября 2011

Я нашел этот "хак" для использования jTemplates с автозаполнением пользовательского интерфейса jQuery:

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

но есть ли способ использовать официальный плагин шаблонов jQuery с jQuery UI Autocomplete? Я бы просто использовал демо в ссылке, но предпочел бы более чистый метод, если это возможно.

(Необходимо использовать шаблоны, потому что я использую их в другом месте сайта и хотел бы использовать непротиворечивый макет для элементов автозаполнения без необходимости поддерживать две версии.)

Ответы [ 3 ]

4 голосов
/ 27 сентября 2011

ОК, 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/

0 голосов
/ 17 марта 2014

Я использовал шаблон подчеркивания, и у меня было много проблем с тем, чтобы он работал с автозаполнением, используя описанный выше метод.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);
};

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 04 ноября 2012

Я искал что-то похожее с рулем .... вот оно:

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

           };

      }
...