Как изменить jquery tag-it plugin: ограничить количество тегов и разрешить доступные теги

Ответ 1

сначала добавьте настраиваемые параметры (maxTags и onlyAvailableTags) в файл плагина, например...

options: {
            itemName          : 'item',
            fieldName         : 'tags',
            availableTags     : [],
            tagSource         : null,
            removeConfirmation: false,
            caseSensitive     : true,
            maxTags           : 9999,//maximum tags allowed default almost unlimited
            onlyAvailableTags : false,//boolean, allows tags that are in availableTags or not 
            allowSpaces: false,
            animate: true,
            singleField: false,
            singleFieldDelimiter: ',',
            singleFieldNode: null,
            tabIndex: null,
            onTagAdded  : null,
            onTagRemoved: null,
            onTagClicked: null
        }

затем замените функцию _isNew на это...

_isNew: function(value) {
            var that = this;
            var isNew = true;
            var count = 0;
            this.tagList.children('.tagit-choice').each(function(i) {
                count++;

                if (that._formatStr(value) == that._formatStr(that.tagLabel(this))|| count >= that.options.maxTags) {
                    isNew = false;
                    return false;
                }
                if (that.options.onlyAvailableTags && $.inArray(that._formatStr(value),that.options.availableTags)==-1) {
                    isNew = false;
                    return false;
                }

            });
            return isNew;
        }

Теперь вы можете использовать параметры при инициализации tagit. разрешены только теги sample с максимальным количеством тэгов

$(function(){
            var sampleTags = ['php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python'];

            //-------------------------------
            // Tag events
            //-------------------------------
            var eventTags = $('#s_tags');
            eventTags.tagit({
                availableTags: sampleTags,
                caseSensitive: false,
                onlyAvailableTags: true,
                maxTags:3,

            })

        });

Ответ 2

Вы можете просто указать этот параметр .tagit:

beforeTagAdded: function(event, ui) {
  if($.inArray(ui.tagLabel, availableTags)==-1) return false;
}

где доступноTags - ваш массив автозаполнения.

Что касается запроса @snuggles ниже, я считаю, что, несмотря на мое ограниченное знакомство с json-протоколами, вы могли бы сделать что-то вроде этого:

//define autocomplete source
var returnedUsers, jsonUrl = "http://[your server]/user_lookup";
$.getJSON(jsonUrl,function(json){
        returnedUsers = json; // or whatever handler you need to use               
}); 

// instantiate tagit

$("#ccList").tagit({
     availableTags: returnedUsers,
     beforeTagAdded: function(event, ui) { 
     // only allow existing values
     if($.inArray(ui.tagLabel, returnedUsers)==-1) return false;
     // limit length
     if ($(".tagit-choice").length >= 5) return false;
});

Ответ 3

Обновление 2013-03-13:

Во-первых, перечитывая OP, теперь я не понимаю, действительно ли я отвечаю на этот вопрос, поскольку они специально спросили, как изменить плагин tag-it, чтобы выполнить две настройки. Если OP действительно хочет изменить подключаемый модуль, это прекрасно, но, как я уже сказал, кажется, что вам нужно - и вы этого не сделаете!

Итак, как выполнить обе вещи без изменения плагина:)

во-первых, вам нужно иметь какой-то глобальный массив для ввода материала, если есть лучший способ сделать это, lmk, но в противном случае:

var returnUsers = [];

Тогда:

    $("#ccList").tagit({
    autocomplete: {
        source: function( request, response ) {
            $.ajax({
                url: "http://[your server]/user_lookup",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function( data ) {
                    returnedUsers = data;
                    response( $.map( data, function( item ) {
                        return {
                            label: item,
                            value: item
                        }
                    }));
                },
                error: function(xhr, status, error) {
                    returnedUsers = [];
                }
            });
        }
    },
    beforeTagAdded: function(event, ui) {
        if ($.inArray(ui.tagLabel, returnedUsers)==-1)
            return false;
        if ($(".tagit-choice").length >= 5)
            return false;
    }
});

Итак, в основном вы должны указать autocomplete.source на функцию, в которой вы обрабатываете все вещи ajax и создаете свой собственный список. Обратите внимание, что это позволяет вам немного гибкости в том, что вы возвращаете из своего back-back (т.е. Он не должен быть массивом строк, это может быть массив хэшей, которые вы анализируете и создаете в пользовательский список). Также обратите внимание, что это не было бы необходимо, если бы я мог найти способ получить доступ к списку возвращаемых значений из более базовой функции автозаполнения в событии "beforeTagAdded" - что-то, что подразумевал Джек, возможно, но не уточнил.

После того, как вы построите массив вещей для отображения, вы вернете его с помощью функции response(). В то же время теперь у вас есть копия этого списка в 'returnsUsers', которую вы можете использовать в функции 'beforeTagAdded'. Кроме того, просто ограничить количество тегов, которые вы разрешаете в поле, просто подсчитав, сколько их уже там, и возвращает false, если оно >= к этому номеру. Не уверен, что это лучший способ получить счет, но он определенно работает.

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

Ответ 4

jQuery UI Tag-it! @version v2.0 (06/2011).

Перейти к файлу tag-it.js

И найдите функцию createTag

И следующий код в начале.

    if (that.options.maxTags) {
      if ($('.tagit li').length > that.options.maxTags) {
        alert('Maxmium ' + that.options.maxTags + ' tags are allowed')
        return false;
       }
    }

Ответ 5

Найдите tagLimit в tag-it.js и установите число, с которым вы хотите ограничить.   Я ограничен с 5. Значение по умолчанию null.

removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : 5, -

Ответ 6

Я улучшил @kaspers ответ с новой обновленной библиотекой. внести некоторые изменения в библиотеку 1. добавить новую опцию в опции  onlyAvailableTags: false,

• поместить проверку в метод createTag

   if (this.options.onlyAvailableTags &&$.inArray(this._formatStr(value),this.options.autocomplete.source)==-1)
  {
   return false;
  }
  

затем вызовите tagit следующим образом. Теперь пометить библиотеку поддерживает tagLimit. Поэтому нам не нужно настраивать его.

       $(function(){
        var sampleTags = ['php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python'];

        //-------------------------------
        // Tag events
        //-------------------------------
        var eventTags = $('#s_tags');
        eventTags.tagit({
            availableTags: sampleTags,
            caseSensitive: false,
            onlyAvailableTags: true,
            tagLimit: 3,

        })

    });