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

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

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

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

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


jquery jquery-ui jquery-ui-autocomplete jquery-plugins jquery-templates
person swatkins    schedule 02.09.2011    source источник
comment
Святая корова, мой блог помогает людям: O   -  person Shawn Mclean    schedule 15.09.2011
comment
Да, это @ShawnMclean. У меня была возможность более внимательно просмотреть ваш пост, и я буду реализовывать ваш взлом с помощью плагина шаблонов jQuery. Я отправлю свой код здесь, как только у меня будет возможность его заполнить.   -  person swatkins    schedule 20.09.2011

Ответы (3)


arrow_upward
4
arrow_downward

Хорошо, 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/

person swatkins    schedule 27.09.2011
comment
Спасибо, что разместили свое решение! Я разместил здесь следующий вопрос: stackoverflow.com/questions/10966459/ - person Mario Zigliotto; 10.06.2012

arrow_upward
0
arrow_downward

я искал что-то подобное с рулем .... так вот оно:

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

           };

      }
person danikoren    schedule 04.11.2012

arrow_upward
0
arrow_downward

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

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

person Angus Bremner    schedule 17.03.2014