jquery.amsify.suggestags
1.0.0
Dies ist ein JQuery-Plugin für Eingabe-Tags mit Vorschlag zur automatischen Vervollständigung.
$ ( 'input' ) . amsifySuggestags ( ) ; npm i suggestagsZur einfachen Initialisierung
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Wenn die Eingabe bereits einen durch Komma getrennten Wert enthält, werden die Tags standardmäßig geladen
< input type =" text " class =" form-control " name =" country " value =" India,UAE,Nepal " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Um die Vorschläge zu erhalten, kann eine Werteliste übergeben werden.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ]
} ) ;Listen Sie auf, ob für Objekte auch ein Tag/Wert-Paar festgelegt werden kann.
< 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 }
]
} ) ; Die Eingabe speichert den durch Komma getrennten value wie folgt
< input type =" text " class =" form-control " name =" 1,2,3,4,5,6 " />Hinweis: Beim Festlegen des Standardwerts für die Eingabe legen Sie den tatsächlichen Wert durch Komma getrennt fest, nicht die Tag-Namen.
Wir können auch Vorschläge über Ajax erhalten
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
url : 'http://www.site.com/suggestions'
}
} ) ;Der Ajax-Methodentyp ist GET , die Struktur der Anforderungsdaten, die Sie erhalten, ist
{
"existing" : [ " one " , " two " , " three " ],
"term" : " something "
} „existenz“ ist ein Array bereits geladener Tags und „Begriff“ ist die Zeichenfolge, nach der Sie suchen möchten.
Die Erfolgsantwort sollte mindestens den Vorschlagsschlüssel enthalten und sein Wert sollte vom Typ Liste/Array sein:
{
"suggestions" : [ " four " , " five " , " six " ]
}
Sie können diese Einstellungen und Rückrufe auch zu dieser Option hinzufügen
$ ( '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
Hinweis : Erfolgreiche und vollständige Rückrufe überschreiben nicht direkt die ursprünglichen Ajax-Rückrufe, sondern werden aufgerufen, nachdem die ursprünglichen Rückrufe ausgeführt wurden.
Diese Option erlaubt einfach keine anderen Eingaben als Vorschläge.
< 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 " />Um die Standardklasse für Tags festzulegen, können Sie diese Einstellung übergeben
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
defaultTagClass : 'badge'
} ) ;Wir können eine Liste von Klassen, Farben oder Hintergründen über die Einstellungen übergeben
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
classes : [ 'bg-primary' , 'bg-success' , 'bg-danger' , 'bg-warning' , 'bg-info' ]
} ) ;Jede Klasse wird über ihre entsprechenden Schlüssel auf jedes Vorschlags-Tag angewendet. Wir können auch Hintergründe und Farben übergeben.
$ ( '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' ] ,
} ) ;Wir können auch Klasse, Farbe und Hintergrund für jedes Vorschlagselement festlegen, wenn es sich bei den Vorschlagselementen um Objekte handelt.
$ ( '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' }
]
} ) ;Dieselben Vorschläge können auch in einer Ajax-Antwort übergeben werden, damit diese Stile funktionieren
{
"suggestions" : [
{
"tag" : " Black " ,
"value" : 1 ,
"background" : " black " ,
"color" : " white "
},
{
"tag" : " White " ,
"value" : 2 ,
"background" : " white " ,
"color" : " black "
}
]
}
Wir können Rückrufe für das Hinzufügen/Entfernen von Tag-Elementen festlegen
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
afterAdd : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
afterRemove : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
} ) ;Alternativ können wir uns auch anmelden, um Ereignisse hinzuzufügen/entfernen
$ ( '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
} ) ; Wir können auch ein Tag-Limit festlegen
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
tagLimit : 5
} ) ; Zum Aktualisieren der Werte können Sie verwenden
var params = {
// Make sure you have parameters which used during first execution
} ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( params , 'refresh' ) ;Um die Instanz zu zerstören, können Sie Folgendes tun
$ ( 'input[name="country"]' ) . amsifySuggestags ( { } , 'destroy' ) ; $ ( 'input[name="country"]' ) . amsifySuggestags ( {
selectOnHover : false
} ) ; Der vorgeschlagene Tag-Wert wird nicht ausgewählt, wenn die Maus über das Vorschlagselement bewegt wird. Standardmäßig ist der Wert true
Dies zeigt eine Meldung an, wenn kein vorgeschlagenes Element angezeigt wird, das mit der Eingabe übereinstimmt.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
noSuggestionMsg : 'Enter to generate new tag'
} ) ; Dadurch werden alle Vorschlagselemente im Eingabefokus angezeigt. Standardmäßig ist dies false
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showAllSuggestions : true
} ) ; Dadurch bleibt das letzte Vorschlagselement im Eingabetextfeld erhalten, auch wenn Sie die Vorschlagsliste verlassen. Standardmäßig ist dies true . Nützlich, wenn showAllSuggestions auf true gesetzt ist und Sie die Vorschlagsliste ausblenden möchten, wenn Sie außerhalb des Eingabetextfelds klicken.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
keepLastOnHoverTag : false
} ) ;Standardmäßig werden der Eingabewert und seine Tag-Namen in der Konsole gedruckt. Sie können den Wert auf „false“ setzen, um nicht in der Konsole zu drucken.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
printValues : false
} ) ;Diese Einstellung dient dazu, fortlaufende Tags auszublenden, wenn sich der Fokus außerhalb des Tags-Bereichs befindet, und stattdessen die +-Nummer anzuzeigen. Standardmäßig ist es 0. Sie können die Zahl so einstellen, dass die Tags nach der angegebenen Zahl ausgeblendet werden, wenn der Fokus deaktiviert ist.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showPlusAfter : 0
} ) ;Es kann eine Rückruffunktion übergeben werden, um den vom Benutzer eingegebenen Text mit einem Vorschlagselement abzugleichen und es in der Vorschlagsliste für den benutzerdefinierten Abgleich anzuzeigen.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
suggestMatch : function ( suggestionItem , value ) {
return ~ suggestionItem . toString ( ) . toLowerCase ( ) . indexOf ( value . toString ( ) . toLowerCase ( ) ) ;
}
} ) ;Dieser Rückruf erhält zwei Parameter, den Wert des Vorschlagselements und den vom Benutzer eingegebenen Textwert. Beide Parameter können verwendet werden, um einen benutzerdefinierten Abgleich durchzuführen und einen Wert ungleich Null zurückzugeben, damit dieser Vorschlag in der Vorschlagsliste angezeigt wird.
Dies ist auch einer der Ansätze, mit denen Sie dieses Plugin verwenden können.
Sie können die Initialisierung durchführen, indem Sie eine Instanz von AmsifySuggestags erstellen und ihr einen Selektor übergeben.
amsifySuggestags = new AmsifySuggestags ( $ ( 'input[name="country"]' ) ) ;
amsifySuggestags . _init ( ) ;Sie müssen es vor der Initialisierung festlegen und können alle im vorherigen Ansatz gezeigten Einstellungsoptionen verwenden.
amsifySuggestags . _settings ( {
suggestions : [ 'Black' , 'White' , 'Red' , 'Blue' , 'Green' , 'Orange' ]
} )
amsifySuggestags . _init ( ) ; Sie können diese Methoden aufrufen, um Tags mit der Instanz von AmsifySuggestags hinzuzufügen/zu entfernen
amsifySuggestags . addTag ( 'Purple' ) ;
amsifySuggestags . removeTag ( 'Red' ) ;Sie können diese Methoden zum Aktualisieren/Zerstören aufrufen
amsifySuggestags . refresh ( ) ;
amsifySuggestags . destroy ( ) ; Hinweis : Dieser Ansatz funktioniert nur für ein einzelnes Selektorelement, nicht für mehrere Elemente mit demselben Selektor.
Damit es für Selektoren mit mehreren Elementen funktioniert, können Sie Folgendes tun:
$ ( '.tags-input' ) . each ( function ( ) {
amsifySuggestags = new AmsifySuggestags ( $ ( this ) ) ;
amsifySuggestags . _init ( ) ;
} ) ;
