как изменить tag-it ui plugin https://github.com/aehlke/tag-it (версия v2.0), поэтому он позволяет только выбирать x чисел тегов и как разрешить только теги, которые находятся в опции "availableTags"?
этот вопрос (или его первая часть) уже задан и передан в прошлом, но для предыдущей версии плагина.
сначала добавьте настраиваемые параметры (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,
})
});
Вы можете просто указать этот параметр .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;
});
Обновление 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, если оно >= к этому номеру. Не уверен, что это лучший способ получить счет, но он определенно работает.
Я знаю, что это старо, и я уверен, что любой эксперт найдет миллион способов сделать это лучше меня, но я не нашел никого, кто бы мог решить эту проблему лучше, чем я изложенных без фактического изменения плагина, который я не предпочитаю делать. НТН!
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;
}
}Найдите tagLimit в tag-it.js и установите число, с которым вы хотите ограничить. Я ограничен с 5. Значение по умолчанию null.
removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : 5, -
Я улучшил @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,
})
});