jquery.amsify.suggestags
1.0.0
Il s'agit d'un plugin JQuery pour les balises d'entrée avec suggestion de saisie semi-automatique.
$ ( 'input' ) . amsifySuggestags ( ) ; npm i suggestagsPour une initialisation simple
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Si l'entrée a déjà des valeurs séparées par des virgules, les balises seront chargées par défaut.
< input type =" text " class =" form-control " name =" country " value =" India,UAE,Nepal " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Une liste de valeurs peut être transmise pour obtenir les suggestions.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ]
} ) ;Indiquez si les objets peuvent également être définis pour avoir une paire balise/valeur.
< 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 }
]
} ) ; L'entrée stockera value séparée par une virgule comme ceci
< input type =" text " class =" form-control " name =" 1,2,3,4,5,6 " />Remarque : Lors de la définition de la valeur par défaut pour l'entrée, définissez la valeur réelle séparée par des virgules et non par les noms de balises.
Nous pouvons également obtenir des suggestions via Ajax
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
url : 'http://www.site.com/suggestions'
}
} ) ;Le type de méthode Ajax sera GET , la structure des données de requête que vous recevrez est
{
"existing" : [ " one " , " two " , " three " ],
"term" : " something "
} existant est un tableau de balises déjà chargées et term est la chaîne que vous essayez de rechercher.
La réponse réussie doit au moins contenir une clé de suggestions et sa valeur doit être de type liste/tableau :
{
"suggestions" : [ " four " , " five " , " six " ]
}
Vous pouvez également ajouter ces paramètres et rappels à cette option
$ ( '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
Remarque : le succès et les rappels complets ne remplacent pas directement les rappels ajax d'origine, mais sont appelés après l'exécution des rappels d'origine.
Cette option n'autorise tout simplement aucune autre entrée que celle des suggestions.
< 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 " />Pour définir la classe par défaut pour les balises, vous pouvez transmettre ce paramètre
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
defaultTagClass : 'badge'
} ) ;Nous pouvons transmettre la liste des classes, des couleurs ou des arrière-plans via les paramètres
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
classes : [ 'bg-primary' , 'bg-success' , 'bg-danger' , 'bg-warning' , 'bg-info' ]
} ) ;Chaque classe s'appliquera à chaque balise de suggestion via leurs clés correspondantes. Nous pouvons également transmettre des arrière-plans et des couleurs.
$ ( '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' ] ,
} ) ;Nous pouvons également définir la classe, la couleur et l'arrière-plan de chaque élément de suggestion si les éléments de suggestion sont des objets.
$ ( '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' }
]
} ) ;Les mêmes suggestions peuvent également être transmises dans la réponse ajax pour que ces styles fonctionnent
{
"suggestions" : [
{
"tag" : " Black " ,
"value" : 1 ,
"background" : " black " ,
"color" : " white "
},
{
"tag" : " White " ,
"value" : 2 ,
"background" : " white " ,
"color" : " black "
}
]
}
Nous pouvons définir des rappels sur l'ajout/suppression d'éléments de balise
$ ( '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 nous pouvons également nous abonner pour ajouter/supprimer des événements
$ ( '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
} ) ; Nous pouvons également définir une limite de balises
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
tagLimit : 5
} ) ; Pour actualiser les valeurs, vous pouvez utiliser
var params = {
// Make sure you have parameters which used during first execution
} ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( params , 'refresh' ) ;Pour détruire l'instance, vous pouvez faire
$ ( 'input[name="country"]' ) . amsifySuggestags ( { } , 'destroy' ) ; $ ( 'input[name="country"]' ) . amsifySuggestags ( {
selectOnHover : false
} ) ; Il ne sélectionnera pas la valeur de balise suggérée lorsque la souris survolera l'élément de suggestion. Par défaut, la valeur est true
Cela affichera un message lorsqu'aucun élément suggéré ne correspond à l'entrée.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
noSuggestionMsg : 'Enter to generate new tag'
} ) ; Cela affichera tous les éléments de suggestion sur le focus de saisie. Par défaut c'est false
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showAllSuggestions : true
} ) ; Cela conservera le dernier élément de suggestion dans le champ de texte de saisie, même lorsque vous quittez la liste de suggestions. Par défaut, c'est true . Utile lorsque showAllSuggestions est défini sur true et que vous souhaitez masquer la liste de suggestions lorsque vous cliquez en dehors du champ de texte de saisie.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
keepLastOnHoverTag : false
} ) ;Par défaut, la valeur d'entrée et ses noms de balises sont imprimés dans la console. Vous pouvez le définir sur false pour ne pas imprimer dans la console.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
printValues : false
} ) ;Ce paramètre permet de masquer les balises en cours lorsque le focus est hors de la section des balises et d'afficher le numéro + à la place. Par défaut, il est 0, vous pouvez définir le nombre pour masquer les balises après le nombre donné lorsque le focus est désactivé.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showPlusAfter : 0
} ) ;Une fonction de rappel peut être transmise pour faire correspondre le texte saisi par l'utilisateur avec l'élément de suggestion à afficher dans la liste de suggestions pour une correspondance personnalisée.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
suggestMatch : function ( suggestionItem , value ) {
return ~ suggestionItem . toString ( ) . toLowerCase ( ) . indexOf ( value . toString ( ) . toLowerCase ( ) ) ;
}
} ) ;Ce rappel recevra deux paramètres, la valeur de l'élément de suggestion et la valeur du texte saisie par l'utilisateur. Les deux paramètres peuvent être utilisés pour effectuer une correspondance personnalisée et renvoyer une valeur non nulle pour permettre à cette suggestion d'apparaître dans la liste des suggestions.
C’est également l’une des approches par lesquelles vous pouvez utiliser ce plugin.
Vous pouvez initialiser en créant une instance d' AmsifySuggestags et en lui transmettant le sélecteur.
amsifySuggestags = new AmsifySuggestags ( $ ( 'input[name="country"]' ) ) ;
amsifySuggestags . _init ( ) ;Vous devez le définir avant l'initialisation et vous pouvez utiliser toutes les options de configuration présentées dans l'approche précédente.
amsifySuggestags . _settings ( {
suggestions : [ 'Black' , 'White' , 'Red' , 'Blue' , 'Green' , 'Orange' ]
} )
amsifySuggestags . _init ( ) ; Vous pouvez appeler ces méthodes pour ajouter/supprimer une balise avec une instance d' AmsifySuggestags
amsifySuggestags . addTag ( 'Purple' ) ;
amsifySuggestags . removeTag ( 'Red' ) ;Vous pouvez appeler ces méthodes pour actualiser/détruire
amsifySuggestags . refresh ( ) ;
amsifySuggestags . destroy ( ) ; Remarque : Cette approche ne fonctionne que pour un seul élément de sélecteur et non pour plusieurs éléments ayant le même sélecteur.
Pour que cela fonctionne pour un sélecteur comportant plusieurs éléments, vous pouvez faire quelque chose comme ceci :
$ ( '.tags-input' ) . each ( function ( ) {
amsifySuggestags = new AmsifySuggestags ( $ ( this ) ) ;
amsifySuggestags . _init ( ) ;
} ) ;
