jquery.amsify.suggestags
1.0.0
Este es un complemento de JQuery para etiquetas de entrada con sugerencia de autocompletar.
$ ( 'input' ) . amsifySuggestags ( ) ; npm i suggestagsPara una inicialización sencilla
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Si la entrada ya tiene valores separados por comas, cargará las etiquetas de forma predeterminada
< input type =" text " class =" form-control " name =" country " value =" India,UAE,Nepal " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Se puede pasar la lista de valores para obtener las sugerencias.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ]
} ) ;Indique si los objetos también se pueden configurar para que tengan un par de etiqueta/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 }
]
} ) ; La entrada almacenará value separado por coma como este
< input type =" text " class =" form-control " name =" 1,2,3,4,5,6 " />Nota: Al configurar el valor predeterminado para la entrada, establezca el valor real separado por comas, no por nombres de etiquetas.
También podemos recibir sugerencias a través de Ajax.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
url : 'http://www.site.com/suggestions'
}
} ) ;El tipo de método Ajax será GET , la estructura de los datos de solicitud que recibirá es
{
"existing" : [ " one " , " two " , " three " ],
"term" : " something "
} existente es una serie de etiquetas ya cargadas y el término es la cadena que está intentando buscar.
La respuesta exitosa debe contener al menos la clave de sugerencias y su valor debe ser de tipo lista/matriz:
{
"suggestions" : [ " four " , " five " , " six " ]
}
También puede agregar estas configuraciones y devoluciones de llamada a esta opción
$ ( '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 : las devoluciones de llamada exitosas y completas no anulan directamente las devoluciones de llamada ajax originales, sino que se llaman después de ejecutar las originales.
Esta opción simplemente no permite otras entradas que no sean sugerencias.
< 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 configurar la clase predeterminada para las etiquetas, puede pasar esta configuración
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
defaultTagClass : 'badge'
} ) ;Podemos pasar lista de clases, colores o fondos a través de la configuración.
$ ( '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 clase aplicará a cada etiqueta de sugerencia a través de sus claves correspondientes. También podemos pasar fondos y colores.
$ ( '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' ] ,
} ) ;También podemos establecer la clase, el color y el fondo de cada elemento de sugerencia si los elementos de sugerencia son 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' }
]
} ) ;También se pueden pasar las mismas sugerencias en la respuesta ajax para que estos estilos funcionen.
{
"suggestions" : [
{
"tag" : " Black " ,
"value" : 1 ,
"background" : " black " ,
"color" : " white "
},
{
"tag" : " White " ,
"value" : 2 ,
"background" : " white " ,
"color" : " black "
}
]
}
Podemos configurar devoluciones de llamada al agregar/eliminar elementos de etiqueta
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
afterAdd : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
afterRemove : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
} ) ;o también podemos suscribirnos para agregar/eliminar 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
} ) ; También podemos establecer un límite de etiquetas.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
tagLimit : 5
} ) ; Para actualizar los valores, puede utilizar
var params = {
// Make sure you have parameters which used during first execution
} ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( params , 'refresh' ) ;Para destruir la instancia, puedes hacer
$ ( 'input[name="country"]' ) . amsifySuggestags ( { } , 'destroy' ) ; $ ( 'input[name="country"]' ) . amsifySuggestags ( {
selectOnHover : false
} ) ; No seleccionará el valor de etiqueta sugerido cuando el mouse pase sobre el elemento de sugerencia. Por defecto el valor es true
Esto mostrará un mensaje cuando no aparezca ningún elemento sugerido que coincida con la entrada.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
noSuggestionMsg : 'Enter to generate new tag'
} ) ; Esto mostrará todos los elementos de sugerencia en el foco de entrada. Por defecto esto es false
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showAllSuggestions : true
} ) ; Esto mantendrá el último elemento de sugerencia en el campo de entrada de texto, incluso cuando se aleje de la lista de sugerencias. Por defecto esto es true . Útil cuando showAllSuggestions está configurado en true y desea ocultar la lista de sugerencias al hacer clic fuera del campo de texto de entrada.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
keepLastOnHoverTag : false
} ) ;De forma predeterminada, el valor de entrada y los nombres de sus etiquetas se imprimen en la consola. Puede configurarlo como falso para que no se imprima en la consola.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
printValues : false
} ) ;Esta configuración sirve para ocultar las etiquetas en curso cuando el foco está fuera de la sección de etiquetas y mostrar el número + en su lugar. De forma predeterminada es 0, puede configurar el número para ocultar las etiquetas después del número dado cuando el foco está fuera.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showPlusAfter : 0
} ) ;Se puede pasar una función de devolución de llamada para hacer coincidir el texto ingresado por el usuario con el elemento de sugerencia para mostrarlo en la lista de sugerencias para una coincidencia personalizada.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
suggestMatch : function ( suggestionItem , value ) {
return ~ suggestionItem . toString ( ) . toLowerCase ( ) . indexOf ( value . toString ( ) . toLowerCase ( ) ) ;
}
} ) ;Esta devolución de llamada recibirá dos parámetros, el valor del elemento de sugerencia y el valor de texto ingresado por el usuario. Ambos parámetros se pueden usar para realizar coincidencias personalizadas y devolver un valor distinto de cero para permitir que esa sugerencia aparezca en la lista de sugerencias.
Este es también uno de los enfoques que puede utilizar este complemento.
Puede inicializar creando una instancia de AmsifySuggestags y pasándole el selector.
amsifySuggestags = new AmsifySuggestags ( $ ( 'input[name="country"]' ) ) ;
amsifySuggestags . _init ( ) ;Debe configurarlo antes de la inicialización y puede usar todas las opciones de configuración que se muestran en el método anterior.
amsifySuggestags . _settings ( {
suggestions : [ 'Black' , 'White' , 'Red' , 'Blue' , 'Green' , 'Orange' ]
} )
amsifySuggestags . _init ( ) ; Puede llamar a estos métodos para agregar/eliminar etiquetas con una instancia de AmsifySuggestags
amsifySuggestags . addTag ( 'Purple' ) ;
amsifySuggestags . removeTag ( 'Red' ) ;Puede llamar a estos métodos para actualizar/destruir
amsifySuggestags . refresh ( ) ;
amsifySuggestags . destroy ( ) ; Nota : este enfoque solo funciona para un solo elemento selector, no para varios elementos que tienen el mismo selector.
Para que funcione para un selector que tiene múltiples elementos, puedes hacer algo como esto:
$ ( '.tags-input' ) . each ( function ( ) {
amsifySuggestags = new AmsifySuggestags ( $ ( this ) ) ;
amsifySuggestags . _init ( ) ;
} ) ;
