Как изменить плагин jquery tag-it: ограничить количество тегов и разрешить только доступные теги - PullRequest
13 голосов
/ 21 сентября 2011

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

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

Ответы [ 6 ]

14 голосов
/ 21 сентября 2011

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

            })

        });
7 голосов
/ 25 февраля 2013

Вы можете просто предоставить этот параметр для .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;
});
3 голосов
/ 13 марта 2013

Обновление 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, если это> = для этого числа. Не уверен, что это лучший способ получить счет, но он определенно работает.

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

2 голосов
/ 14 декабря 2015

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

А на странице

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

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

1 голос
/ 19 июня 2016

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

removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : 5, -
0 голосов
/ 21 января 2014

Я улучшил ответ @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,

        })

    });
...