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' ]
} ) ;列出物件是否也可以設定為具有標籤/值對。
< 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 "
}現有是已載入標籤的數組，術語是您要搜尋的字串。
成功回應至少應包含建議鍵，其值應為清單/陣列類型：
{
"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 回調，而是在執行原始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 ( ) ) ;
}
} ) ;此回呼將接收兩個參數，建議項值和使用者輸入的文字值。這兩個參數都可用於進行自訂匹配並傳回非零值以使該建議出現在建議清單中。
這也是您可以使用此外掛程式的方法之一。
您可以透過建立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 ( ) ;
} ) ;
