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' ]
} ) ;List if オブジェクトにタグと値のペアを設定することもできます。
< 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 "
} existing はすでに読み込まれているタグの配列であり、 term は検索しようとしている文字列です。
成功応答には少なくとも提案キーが含まれている必要があり、その値はリスト/配列型である必要があります。
{
"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
注: successおよびcompleteコールバックは、元の 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 ( ) ) ;
}
} ) ;このコールバックは、提案項目の値とユーザーが入力したテキスト値の 2 つのパラメーターを受け取ります。どちらのパラメーターもカスタム マッチングを実行し、ゼロ以外の値を返してその提案を提案リストに表示するために使用できます。
これも、このプラグインを使用できるアプローチの 1 つです。
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 ( ) ;
} ) ;
