jquery.amsify.suggestags
1.0.0
Это плагин JQuery для ввода тегов с автоматическим заполнением.
$ ( 'input' ) . amsifySuggestags ( ) ; npm i suggestagsДля простой инициализации
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Если входные данные уже имеют значение, разделенное запятой, теги будут загружены по умолчанию.
< input type =" text " class =" form-control " name =" country " value =" India,UAE,Nepal " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Список значений можно передать, чтобы получить предложения.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ]
} ) ;Укажите, можно ли также задать для объектов пару тег/значение.
< input type =" text " class =" form-control " name =" color " /> $ ( 'input[name="color"]' ) . amsifySuggestags ( {
suggestions : [
{ tag : 'Black' , value : 1 } ,
{ tag : 'White' , value : 2 } ,
{ tag : 'Red' , value : 3 } ,
{ tag : 'Blue' , value : 4 } ,
{ tag : 'Green' , value : 5 } ,
{ tag : 'Orange' , value : 6 }
]
} ) ; Ввод будет хранить value разделенное запятой, вот так
< input type =" text " class =" form-control " name =" 1,2,3,4,5,6 " />Примечание. При настройке значения по умолчанию для входа указывайте фактическое значение, разделенное запятой, а не имена тегов.
Мы также можем получать предложения через Ajax.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
url : 'http://www.site.com/suggestions'
}
} ) ;Тип метода Ajax будет GET , структура данных запроса, которые вы получите, будет
{
"existing" : [ " one " , " two " , " three " ],
"term" : " something "
} существующий — это массив уже загруженных тегов, а термин — это строка, которую вы пытаетесь найти.
Ответ об успехе должен как минимум содержать ключ предложения , а его значение должно иметь тип списка/массива:
{
"suggestions" : [ " four " , " five " , " six " ]
}
Вы также можете добавить эти настройки и обратные вызовы к этой опции.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
timeout : - 1 ,
minChars : 2 ,
minChange : - 1 ,
delay : 100 ,
type : 'GET' ,
url : 'http://www.site.com/suggestions' ,
dataType : null ,
beforeSend : function ( ) {
console . info ( 'beforeSend' ) ;
} ,
success : function ( data ) {
console . info ( 'success' ) ;
} ,
error : function ( ) {
console . info ( 'error' ) ;
} ,
complete : function ( data ) {
console . info ( 'complete' ) ;
}
}
} ) ; timeout - It is for cancelling the request after given specific seconds, default is -1
minChars - It is the minimum chars types before the first ajax hit, default is 2
minChange - It recall the ajax based on the minimum percentage chars changed compared to the string passed in last ajax call, default is -1
delay - It is the milliseconds time delay to call ajax or whitelist suggestions on text entered and wait, defult is 100
type - It is type of method we pass, default is GET
dataType - It is dateType of request data being passed, default is null
Примечание . Обратные вызовы успеха и завершения не переопределяют исходные обратные вызовы ajax напрямую, а вызываются после выполнения исходных.
Эта опция просто не позволяет вводить какие-либо другие данные, кроме предложений.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true
} ) ; < input type =" text " class =" form-control " name =" country " />Чтобы установить класс по умолчанию для тегов, вы можете передать этот параметр
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
defaultTagClass : 'badge'
} ) ;Мы можем передать список классов, цветов или фонов через настройки.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
classes : [ 'bg-primary' , 'bg-success' , 'bg-danger' , 'bg-warning' , 'bg-info' ]
} ) ;Каждый класс будет применяться к каждому тегу предложения через соответствующие ключи. Мы также можем передавать фон и цвета.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
backgrounds : [ 'blue' , 'green' , 'red' , 'orange' , '#424242' ] ,
colors : [ 'white' , 'black' , 'white' , 'black' , 'white' ] ,
} ) ;Мы также можем установить класс, цвет и фон для каждого элемента предложения, если элементы предложения являются объектами.
$ ( 'input[name="color"]' ) . amsifySuggestags ( {
suggestions : [
{ tag : 'Black' , value : 1 , background : 'black' , color : 'white' } ,
{ tag : 'White' , value : 2 , background : 'white' , color : 'black' } ,
{ tag : 'Red' , value : 3 , background : 'red' , color : 'white' } ,
{ tag : 'Blue' , value : 4 , background : 'blue' , color : 'white' } ,
{ tag : 'Green' , value : 5 , background : 'green' , color : 'white' } ,
{ tag : 'Orange' , value : 6 , background : 'orange' , color : 'white' }
]
} ) ;Те же предложения можно также передать в ответе ajax, чтобы эти стили работали.
{
"suggestions" : [
{
"tag" : " Black " ,
"value" : 1 ,
"background" : " black " ,
"color" : " white "
},
{
"tag" : " White " ,
"value" : 2 ,
"background" : " white " ,
"color" : " black "
}
]
}
Мы можем установить обратные вызовы при добавлении/удалении элементов тега.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
afterAdd : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
afterRemove : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
} ) ;или мы также можем подписаться на добавление/удаление событий
$ ( 'input[name="country"]' ) . on ( 'suggestags.add' , function ( e ) {
// Do something after adding tag
} ) ;
$ ( 'input[name="country"]' ) . on ( 'suggestags.change' , function ( e ) {
// Do something while add/remove tag
} ) ;
$ ( 'input[name="country"]' ) . on ( 'suggestags.remove' , function ( e ) {
// Do something before removing tag
} ) ; Мы также можем установить лимит тегов
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
tagLimit : 5
} ) ; Для обновления значений вы можете использовать
var params = {
// Make sure you have parameters which used during first execution
} ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( params , 'refresh' ) ;Для уничтожения экземпляра вы можете сделать
$ ( 'input[name="country"]' ) . amsifySuggestags ( { } , 'destroy' ) ; $ ( 'input[name="country"]' ) . amsifySuggestags ( {
selectOnHover : false
} ) ; Предложенное значение тега не будет выбрано при наведении указателя мыши на предлагаемый элемент. По умолчанию значение true
Это покажет сообщение, когда не появится предложенный элемент, соответствующий входным данным.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
noSuggestionMsg : 'Enter to generate new tag'
} ) ; Это покажет все элементы предложения в фокусе ввода. По умолчанию это false
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showAllSuggestions : true
} ) ; Это сохранит последний элемент предложения в текстовом поле ввода даже при выходе из списка предложений. По умолчанию это true . Полезно, когда для showAllSuggestions установлено значение true и вы хотите скрыть список предложений при щелчке за пределами текстового поля ввода.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
keepLastOnHoverTag : false
} ) ;По умолчанию входное значение и имена его тегов печатаются в консоли. Вы можете установить значение false, чтобы не печатать в консоли.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
printValues : false
} ) ;Этот параметр предназначен для скрытия текущих тегов, когда фокус находится за пределами раздела тегов, и вместо этого отображает номер + . По умолчанию это 0, вы можете установить номер, чтобы скрыть теги после заданного номера, когда фокус отключен.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showPlusAfter : 0
} ) ;Можно передать функцию обратного вызова, чтобы сопоставить введенный пользователем текст с элементом предложения, который будет отображаться в списке предложений для индивидуального сопоставления.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
suggestMatch : function ( suggestionItem , value ) {
return ~ suggestionItem . toString ( ) . toLowerCase ( ) . indexOf ( value . toString ( ) . toLowerCase ( ) ) ;
}
} ) ;Этот обратный вызов получит два параметра: значение элемента предложения и текстовое значение, введенное пользователем. Оба параметра можно использовать для пользовательского сопоставления и возврата ненулевого значения, чтобы это предложение появилось в списке предложений.
Это также один из способов использования этого плагина.
Вы можете инициализировать, создав экземпляр AmsifySuggestags и передав ему селектор.
amsifySuggestags = new AmsifySuggestags ( $ ( 'input[name="country"]' ) ) ;
amsifySuggestags . _init ( ) ;Вам необходимо установить его перед инициализацией, и вы можете использовать все параметры настройки, показанные в предыдущем подходе.
amsifySuggestags . _settings ( {
suggestions : [ 'Black' , 'White' , 'Red' , 'Blue' , 'Green' , 'Orange' ]
} )
amsifySuggestags . _init ( ) ; Вы можете вызвать эти методы для добавления/удаления тега с помощью экземпляра AmsifySuggestags
amsifySuggestags . addTag ( 'Purple' ) ;
amsifySuggestags . removeTag ( 'Red' ) ;Вы можете вызвать эти методы для обновления/уничтожения
amsifySuggestags . refresh ( ) ;
amsifySuggestags . destroy ( ) ; Примечание . Этот подход работает только для одного элемента селектора, а не для нескольких элементов, имеющих один и тот же селектор.
Чтобы заставить его работать для селектора, имеющего несколько элементов, вы можете сделать что-то вроде этого:
$ ( '.tags-input' ) . each ( function ( ) {
amsifySuggestags = new AmsifySuggestags ( $ ( this ) ) ;
amsifySuggestags . _init ( ) ;
} ) ;
