Проблема слияния автозаполнения JQery-интерфейса и плагина тегов (XOXCO) - PullRequest
Новая
       26

Проблема слияния автозаполнения JQery-интерфейса и плагина тегов (XOXCO)

5 голосов
/ 08 марта 2012

Я уже некоторое время использую автозаполнение jquery без проблем. Я хочу создать систему тегов (например, в stackoverflow).

Для этого я использую два плагина:

Он у меня работает и работает с использованием этого кода: 

$('#related_tags').tagsInput({
    autocomplete_url : 'live_search.php',
    autocomplete : {
            minLength: 3,
            delay: 150,
            //DATA AS OPTION??
    },
   'height':'30px',
   'width':'auto',
   'removeWithBackspace' : true,
   'minChars' : 3,
   'maxChars' : 200,
   'placeholderColor' : '#666666'
});

Однако мне нужно изменить способ, которым livesearch отображает найденные данные (чтобы он отображал не только метку). Если вы не используете эти два плагина вместе (скажем, вы используете автозаполнение), это просто, вы просто делаете что-то вроде этого: 

$( "#related_tags" ).autocomplete({
        source: 'live_search.php',
        minLength: 3,
        delay: 150
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a href='item.php'>" + item.label + " " + item.surname + "<span style='color:#003399;'>" + item.p_name + "</span></a>" )
            .appendTo(ul);
};

Как видите, я показываю не только ярлык элемента, но и фамилию и имя_папки.

Итак, мой вопрос:

Как вы используете функцию рендеринга данных при объединении автозаполнения и плагинов тегов вместе?

Поскольку я считаю, что данные недоступны в качестве опции автозаполнения, я не могу просто увеличить их. Есть идеи?

P.S .: Если вы знаете, как сделать это с помощью плагина, отличного от xoxco, пожалуйста, скажите мне в любом случае. Спасибо!

1 Ответ

2 голосов
/ 08 марта 2012

Плагин работает со своего рода скрытым вводом, к которому плагин прикрепляет автозаполнение jquery.

Таким образом, вы просто должны переопределить _renderItem в этом поле ввода, как вы это сделали бы для простого автозаполнения ввода.

DEMO

Таким образом, если вы примените плагин tagsInput к следующему входу (из примера на плагине веб-сайта): 

<input name="tags" id="tags" value="foo,bar,baz" />​

$('#tags').tagsInput({
    autocomplete_url: 'some url'
});

В итоге вы получите следующую сгенерированную разметку: 

<input name="tags" id="tags" value="foo,bar,baz" style="display: none; ">
<div id="tags_tagsinput" class="tagsinput" style="width: 300px; height: 100px; ">
    <span class="tag"><span>foo&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>bar&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>baz&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><div id="tags_addTag">

    <input id="tags_tag" value="" data-default="add a tag" style="color: rgb(102, 102, 102); width: 80px; " class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></div>

    <div class="tags_clear"></div>
</div>

См. Поле ввода tags_tag. Это элемент, к которому подключен плагин автозаполнения. Затем вы можете просто переопределить _renderItem: 

$('#tags_tag')
    .data('autocomplete')
    ._renderItem = function(ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a href='item.php'>" + item.someProperty + "</a>")
            .appendTo(ul);
};​
...