jquery.amsify.suggestags
1.0.0
Ini adalah plugin JQuery untuk tag input dengan saran pelengkapan otomatis.
$ ( 'input' ) . amsifySuggestags ( ) ; npm i suggestagsUntuk inisialisasi sederhana
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Jika input sudah memiliki nilai yang dipisahkan dengan koma, maka tag akan dimuat secara default
< input type =" text " class =" form-control " name =" country " value =" India,UAE,Nepal " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( ) ; Daftar nilai dapat diteruskan untuk mendapatkan saran.
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ]
} ) ;Daftar apakah objek juga dapat diatur untuk memiliki pasangan tag/nilai.
< 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 }
]
} ) ; Input akan menyimpan value yang dipisahkan dengan koma seperti ini
< input type =" text " class =" form-control " name =" 1,2,3,4,5,6 " />Catatan: Saat mengatur nilai default untuk input, tetapkan nilai sebenarnya yang dipisahkan dengan koma, bukan nama tag.
Kami juga bisa mendapatkan saran melalui Ajax
< input type =" text " class =" form-control " name =" country " /> $ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestionsAction : {
url : 'http://www.site.com/suggestions'
}
} ) ;Jenis metode Ajax adalah GET , struktur data permintaan yang akan Anda terima adalah
{
"existing" : [ " one " , " two " , " three " ],
"term" : " something "
} yang ada adalah larik tag yang sudah dimuat dan term adalah string yang Anda coba cari.
Respons sukses setidaknya harus berisi kunci saran dan nilainya harus bertipe daftar/array:
{
"suggestions" : [ " four " , " five " , " six " ]
}
Anda juga dapat menambahkan pengaturan dan panggilan balik ini ke opsi ini
$ ( '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
Catatan : panggilan balik yang berhasil dan selesai tidak secara langsung menimpa panggilan balik ajax asli, melainkan dipanggil setelah panggilan balik asli dijalankan.
Opsi ini tidak mengizinkan masukan lain selain dari saran.
< 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 " />Untuk menyetel kelas default untuk tag, Anda dapat meneruskan setelan ini
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
defaultTagClass : 'badge'
} ) ;Kita dapat meneruskan daftar kelas, warna atau latar belakang melalui pengaturan
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
whiteList : true ,
classes : [ 'bg-primary' , 'bg-success' , 'bg-danger' , 'bg-warning' , 'bg-info' ]
} ) ;Setiap kelas akan diterapkan ke setiap tag saran melalui kuncinya yang sesuai. Kami juga dapat meneruskan latar belakang dan warna.
$ ( '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' ] ,
} ) ;Kita juga dapat mengatur kelas, warna dan latar belakang pada setiap item saran jika item saran tersebut adalah objek.
$ ( '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' }
]
} ) ;Saran yang sama juga dapat diberikan dalam respons ajax agar gaya ini berfungsi
{
"suggestions" : [
{
"tag" : " Black " ,
"value" : 1 ,
"background" : " black " ,
"color" : " white "
},
{
"tag" : " White " ,
"value" : 2 ,
"background" : " white " ,
"color" : " black "
}
]
}
Kita dapat mengatur callback pada penambahan/penghapusan elemen tag
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
afterAdd : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
afterRemove : function ( value ) {
console . info ( value ) ; // Parameter will be value
} ,
} ) ;atau kita juga bisa berlangganan untuk menambah/menghapus acara
$ ( '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
} ) ; Kami juga dapat menetapkan batas tag
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
tagLimit : 5
} ) ; Untuk menyegarkan nilai, Anda dapat menggunakan
var params = {
// Make sure you have parameters which used during first execution
} ;
$ ( 'input[name="country"]' ) . amsifySuggestags ( params , 'refresh' ) ;Untuk menghancurkan instance, Anda bisa melakukannya
$ ( 'input[name="country"]' ) . amsifySuggestags ( { } , 'destroy' ) ; $ ( 'input[name="country"]' ) . amsifySuggestags ( {
selectOnHover : false
} ) ; Itu tidak akan memilih nilai tag yang disarankan ketika mouse mengarahkan item saran. Secara default nilainya true
Ini akan menampilkan pesan ketika tidak ada item yang disarankan yang cocok dengan input.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
noSuggestionMsg : 'Enter to generate new tag'
} ) ; Ini akan menampilkan semua item saran pada fokus masukan. Secara default, ini false
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showAllSuggestions : true
} ) ; Ini akan mempertahankan item saran terakhir di kolom teks input, bahkan ketika menjauh dari daftar saran. Secara default, ini true . Berguna ketika showAllSuggestions diatur ke true dan Anda ingin menyembunyikan daftar saran saat mengklik keluar dari kolom teks input.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
keepLastOnHoverTag : false
} ) ;Secara default, nilai input dan nama tagnya dicetak di konsol. Anda dapat menyetelnya ke false agar tidak mencetak di konsol.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
printValues : false
} ) ;Pengaturan ini untuk menyembunyikan tag yang dilanjutkan ketika fokus berada di luar bagian tag dan menampilkan angka + sebagai gantinya. Secara default adalah 0, Anda dapat mengatur nomor untuk menyembunyikan tag setelah nomor yang diberikan saat fokus keluar.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
showPlusAfter : 0
} ) ;Fungsi panggilan balik dapat diteruskan untuk mencocokkan teks yang dimasukkan pengguna dengan item saran untuk ditampilkan dalam daftar saran untuk pencocokan khusus.
$ ( 'input[name="country"]' ) . amsifySuggestags ( {
suggestions : [ 'India' , 'Pakistan' , 'Nepal' , 'UAE' , 'Iran' , 'Bangladesh' ] ,
suggestMatch : function ( suggestionItem , value ) {
return ~ suggestionItem . toString ( ) . toLowerCase ( ) . indexOf ( value . toString ( ) . toLowerCase ( ) ) ;
}
} ) ;Callback ini akan menerima dua parameter, nilai item saran dan nilai teks yang dimasukkan oleh pengguna. Kedua parameter dapat digunakan untuk melakukan pencocokan khusus dan mengembalikan nilai bukan nol agar saran tersebut muncul di daftar saran.
Ini juga salah satu pendekatan Anda dapat menggunakan plugin ini.
Anda dapat melakukan inisialisasi dengan membuat instance AmsifySuggestags dan meneruskan pemilih ke sana.
amsifySuggestags = new AmsifySuggestags ( $ ( 'input[name="country"]' ) ) ;
amsifySuggestags . _init ( ) ;Anda perlu mengaturnya sebelum inisialisasi dan Anda dapat menggunakan semua opsi pengaturan yang ditunjukkan pada pendekatan sebelumnya.
amsifySuggestags . _settings ( {
suggestions : [ 'Black' , 'White' , 'Red' , 'Blue' , 'Green' , 'Orange' ]
} )
amsifySuggestags . _init ( ) ; Anda dapat memanggil metode ini untuk menambah/menghapus tag dengan instance AmsifySuggestags
amsifySuggestags . addTag ( 'Purple' ) ;
amsifySuggestags . removeTag ( 'Red' ) ;Anda dapat memanggil metode ini untuk menyegarkan/menghancurkan
amsifySuggestags . refresh ( ) ;
amsifySuggestags . destroy ( ) ; Catatan : Pendekatan ini hanya berfungsi untuk elemen pemilih tunggal, bukan untuk beberapa elemen yang memiliki pemilih yang sama.
Untuk membuatnya berfungsi untuk pemilih yang memiliki banyak elemen, Anda dapat melakukan sesuatu seperti ini:
$ ( '.tags-input' ) . each ( function ( ) {
amsifySuggestags = new AmsifySuggestags ( $ ( this ) ) ;
amsifySuggestags . _init ( ) ;
} ) ;
