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

Как изменить плагин tag-it ui https://github.com/aehlke/tag-it (версия v2.0) так, чтобы он позволял выбирать только x номеров тегов и как разрешать только те теги, которые находятся в "availableTags" -option"?

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

Источник

6 ответов

Решение

Сначала добавьте пользовательские параметры (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. разрешены только выборочные теги с максимум 3 тегами

$(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,

            })

        });
Источник

Вы можете просто предоставить этот параметр.tagit:

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

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

Что касается запроса @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;
});
Источник

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

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

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

во-первых, у вас должен быть какой-то глобальный массив для размещения вещей, если есть лучший способ сделать это, 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 и создаете свой собственный список. Обратите внимание, что это дает вам некоторую гибкость в том, что вы возвращаете из своего cgi-сервера (т. Е. Это не обязательно должен быть массив строк, это может быть массив хешей, которые вы анализируете и встраиваете в пользовательский список). Также обратите внимание, что в этом не было бы необходимости, если бы я только мог найти способ получить доступ к списку возвращаемых значений из более простой функции автозаполнения в событии beforeTagAdded - то, что Джек подразумевал, было возможно, но не уточняло.

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

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

Источник

jQuery UI Tag-это! @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;
       }
    }

И на странице

$("#myTags").tagit({
  maxTags: 8
});

Это ограничит теги до 8 тегов. Вы можете изменить число на любое, чтобы ограничить количество тегов.

Источник

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

removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : 5, -
Источник

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

  1. поставить проверку в методе createTag

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

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

       $(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,

        })

    });
Источник
Другие вопросы по тегам