jquery.amsify.suggestags
1.0.0
Este é um plugin JQuery para tags de entrada com sugestão de preenchimento automático.
$ ( 'input' ) . amsifySuggestags ( ) ; npm i suggestagsPara inicialização simples
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Se o input já estiver com valor separado por vírgula, ele carregará as tags por padrão
< input type =" text " class =" form-control " name =" country " value =" India,UAE,Nepal " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Lista de valores pode ser passada para obter sugestões.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ]
} ) ;Lista se os objetos também podem ser configurados para ter um par tag/valor.
< 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 }
]
} ) ; A entrada armazenará value separados por vírgula assim
< input type =" text " class =" form-control " name =" 1,2,3,4,5,6 " />Nota: Ao definir o valor padrão para a entrada, defina o valor real separado por vírgula e não por nomes de tags.
Também podemos obter sugestões através do Ajax
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
url : 'http://www.site.com/suggestions'
}
} ) ;O tipo de método Ajax será GET , a estrutura dos dados da solicitação que você receberá é
{
"existing" : [ " one " , " two " , " three " ],
"term" : " something "
} existente é uma matriz de tags já carregadas e termo é a string que você está tentando pesquisar.
A resposta de sucesso deve conter pelo menos a chave de sugestões e seu valor deve ser do tipo lista/matriz:
{
"suggestions" : [ " four " , " five " , " six " ]
}
Você também pode adicionar essas configurações e retornos de chamada a esta opção
$ ( '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
Nota : retornos de chamada bem-sucedidos e completos não substituem diretamente os retornos de chamada originais do ajax, mas são chamados após a execução dos originais.
Esta opção simplesmente não permite outras entradas além de sugestões.
< 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 " />Para definir a classe padrão para tags, você pode passar esta configuração
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
defaultTagClass : 'badge'
} ) ;Podemos passar lista de classes, cores ou planos de fundo através das configurações
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
classes : [ 'bg-primary' , 'bg-success' , 'bg-danger' , 'bg-warning' , 'bg-info' ]
} ) ;Cada classe será aplicada a cada tag de sugestão por meio de suas chaves correspondentes. Também podemos passar fundos e cores.
$ ( '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' ] ,
} ) ;Também podemos definir classe, cor e plano de fundo em cada item de sugestão se os itens de sugestão forem objetos.
$ ( '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' }
]
} ) ;As mesmas sugestões também podem ser passadas na resposta ajax para que esses estilos funcionem
{
"suggestions" : [
{
"tag" : " Black " ,
"value" : 1 ,
"background" : " black " ,
"color" : " white "
},
{
"tag" : " White " ,
"value" : 2 ,
"background" : " white " ,
"color" : " black "
}
]
}
Podemos definir retornos de chamada para adicionar/remover elementos de tag
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
afterAdd : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
afterRemove : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
} ) ;ou também podemos assinar para adicionar/remover eventos
$ ( '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
} ) ; Também podemos definir limite de tags
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
tagLimit : 5
} ) ; Para atualizar os valores, você pode usar
var params = {
// Make sure you have parameters which used during first execution
} ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( params , 'refresh' ) ;Para destruir a instância, você pode fazer
$ ( 'input[name="country"]' ) . amsifySuggestags ( { } , 'destroy' ) ; $ ( 'input[name="country"]' ) . amsifySuggestags ( {
selectOnHover : false
} ) ; Ele não selecionará o valor da tag sugerida quando o mouse passar sobre o item de sugestão. Por padrão o valor é true
Isso mostrará uma mensagem quando não houver nenhum item sugerido que corresponda à entrada.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
noSuggestionMsg : 'Enter to generate new tag'
} ) ; Isso mostrará todos os itens de sugestão no foco de entrada. Por padrão, isso é false
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showAllSuggestions : true
} ) ; Isso manterá o último item de sugestão no campo de texto de entrada, mesmo ao sair da lista de sugestões. Por padrão, isso é true . Útil quando showAllSuggestions está definido como true e você deseja ocultar a lista de sugestões ao clicar fora do campo de texto de entrada.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
keepLastOnHoverTag : false
} ) ;Por padrão, o valor de entrada e seus nomes de tag são impressos no console. Você pode definir como falso para não imprimir no console.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
printValues : false
} ) ;Esta configuração serve para ocultar as tags anteriores quando o foco está fora da seção de tags e, em vez disso, mostrar o número + . Por padrão é 0, você pode definir o número para ocultar as tags após o número fornecido quando o foco estiver fora.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showPlusAfter : 0
} ) ;Uma função de retorno de chamada pode ser passada para combinar o texto inserido pelo usuário com o item de sugestão para mostrar na lista de sugestões para correspondência personalizada.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
suggestMatch : function ( suggestionItem , value ) {
return ~ suggestionItem . toString ( ) . toLowerCase ( ) . indexOf ( value . toString ( ) . toLowerCase ( ) ) ;
}
} ) ;Este retorno de chamada receberá dois parâmetros, o valor do item de sugestão e o valor do texto inserido pelo usuário. Ambos os parâmetros podem ser usados para fazer correspondência personalizada e retornar um valor diferente de zero para permitir que essa sugestão apareça na lista de sugestões.
Esta também é uma das abordagens que você pode usar este plugin.
Você pode inicializar criando uma instância de AmsifySuggestags e passando o seletor para ela.
amsifySuggestags = new AmsifySuggestags ( $ ( 'input[name="country"]' ) ) ;
amsifySuggestags . _init ( ) ;Você precisa configurá-lo antes da inicialização e pode usar todas as opções de configuração mostradas na abordagem anterior.
amsifySuggestags . _settings ( {
suggestions : [ 'Black' , 'White' , 'Red' , 'Blue' , 'Green' , 'Orange' ]
} )
amsifySuggestags . _init ( ) ; Você pode chamar esses métodos para adicionar/remover tag com instância de AmsifySuggestags
amsifySuggestags . addTag ( 'Purple' ) ;
amsifySuggestags . removeTag ( 'Red' ) ;Você pode chamar esses métodos para atualizar/destruir
amsifySuggestags . refresh ( ) ;
amsifySuggestags . destroy ( ) ; Nota : Esta abordagem funciona apenas para um único elemento seletor e não para vários elementos com o mesmo seletor.
Para fazer funcionar para um seletor com vários elementos, você pode fazer algo assim:
$ ( '.tags-input' ) . each ( function ( ) {
amsifySuggestags = new AmsifySuggestags ( $ ( this ) ) ;
amsifySuggestags . _init ( ) ;
} ) ;
