jquery javascript untuk menulis kewarganegaraan control_jquery

Saya telah mengalami kekurangan kawalan kewarganegaraan yang baik, jadi saya meluangkan masa untuk menulis kawalan kewarganegaraan dan kini berkongsi dengan semua orang.

Fungsi utama dan pengenalan antara muka

Kawalan kewarganegaraan terutamanya menyokong penapisan bahasa Cina dan Inggeris serta acara naik dan turun papan kekunci.

Pengenalan kod sumber

Inti kawalan kewarganegaraan ialah dua fail, navtionality.js dan mian.css. Fungsi utama navtionality.js ialah pembinaan DOM bagi kawalan kewarganegaraan dan pengikatan acara yang sepadan terutamanya digunakan untuk menghasilkan gaya kawalan kewarganegaraan. Dan main.js ialah kaedah panggilan kawalan kewarganegaraan.

Struktur HTML

Untuk kawalan kewarganegaraan dipaparkan pada halaman, ia mesti ditetapkan terlebih dahulu pada halaman untuk kawalan dimuatkan. kawalan-kewarganegaraan-cadang ialah bekas, input ialah penerimaan input, kewarganegaraan-cadang-senarai-bekas ialah senarai segera, digunakan untuk memaparkan senarai kewarganegaraan yang ditapis.

Salin kod Kod adalah seperti berikut:

        

               
                                            

                   

Masukkan carian bahasa Cina dan Inggeris/kod atau ↑↓ pilih

& Lt; ul class = "kewarganegaraan-suggest-list" & gt; & lt;/ul & gt;
                                                                                                                                                                                                                                                                                                                                 

navtionality.js Pengenalan

Kewarganegaraan ialah teras kawalan kewarganegaraan dan bertanggungjawab terutamanya untuk penapisan data, pemaparan DOM dan pengikatan peristiwa yang sepadan dengan kawalan kewarganegaraan. init ialah pintu masuk ke seluruh kawalan Objek pengikat khusus ditentukan melalui parameter pilihan yang diluluskan.

Salin kod Kod adalah seperti berikut:

var kewarganegaraan = {

Data:[]
strData: Rentetan,
input: Objek,
Senarai: Objek,
//Penerangan fungsi: Permulaan
init: fungsi (pilihan) {
},
//Penerangan fungsi: tetapan pilihan
setOption: fungsi (pilihan) {
},
//Perihalan fungsi: Peristiwa mengikat
setEvent: fungsi () {
},
//Penerangan fungsi: Ikat data
setData: fungsi () {
},
//Penerangan fungsi: Cari
doSearch: fungsi (kunci) {
},
//Penerangan fungsi: Senarai tetapan
setList: fungsi (fvalue) {
},
//Penerangan fungsi: Peristiwa senarai pengikatan
setListEvent: fungsi () {
},
//Penerangan fungsi: Tetapkan nilai item tunggal
setValue: fungsi (item, sorok) {
},
//Penerangan fungsi: Data pengesahan
chkValue: fungsi () {
},
//Perihalan fungsi: Acara tetikus
setKeyDownEvent: fungsi (acara) {
}
}

Pengenalan carian pantas

Dalam keseluruhan kawalan kewarganegaraan, carian adalah bahagian paling penting, cara menapis data kewarganegaraan yang sepadan berdasarkan input pengguna. Kaedah yang kami pakai adalah melalui kaedah pemadanan biasa Kami memformat data kewarganegaraan

dahulu

Sebagai contoh, data kewarganegaraan asal adalah seperti ini: [{ id: "CN", en: "China", cn: "Mainland China" }, { id: "HK", en: "Hong Kong", cn: "Hong Kong, China" }, { id: "MO", en: "Macau", cn: "Macau, China" }

Kemudian data terformat kami adalah seperti ini: #CN|China|中国 Tanah Besar##HK|Hong Kong|China Hong Kong##MO|Macau|China Macau##

Mengapa kita melakukan ini? Ini kerana kita perlu menggunakan ungkapan biasa untuk mencapai pemadanan data yang pantas.

Salin kod Kod adalah seperti berikut:

//Penerangan fungsi: Cari
doSearch: fungsi (kunci) {
jika (!kunci || kunci == "") kembalikan ["CN|China|Tanah Besar China", "HK|Hong Kong|Hong Kong, China", "MO|Macau|Macau, China", "TW|Taiwan| Taiwan, China" ];
         var reg = new RegExp("#[^#]*?" kekunci "[^#]*?#", "gi");
          kembalikan this.strData.match(reg);
}

Anda mesti memahami kebanyakannya selepas melihat padanan biasa kami Ya, kami menggunakan ungkapan biasa untuk menapis data dengan cepat dengan menukar tatasusunan asal kepada rentetan.

Membandingkan kaedah carian yang kami laksanakan melalui traversal, kami dapati bahawa kecekapan regularisasi adalah lebih tinggi.

Salin kod Kod adalah seperti berikut:

//Penerangan fungsi: Cari
doSearch: fungsi (kunci) {
jika (!kunci || kunci == "") kembalikan ["CN|China|Tanah Besar China", "HK|Hong Kong|Hong Kong, China", "MO|Macau|Macau, China", "TW|Taiwan| Taiwan, China" ];
      var carian = [];
for(var i=0; i if(this.data[i].id.indexOf(key) >= 0 || this.data[i].en.indexOf(key) >= 0 || this.data[i].cn.indexOf (kunci) >= 0){
Cari.push(data.ini[i]);
            }
}
         kembalikan carian;
}

pengenalan main.js

Utama ialah kaedah yang memanggil kawalan kewarganegaraan dan mengikat kawalan kewarganegaraan dengan melintasi objek DOM yang calssnya ialah kawalan-kewarganegaraan-cadangkan dalam halaman.

Salin kod Kod adalah seperti berikut:

$(".control-nationality-suggest").setiap(fungsi () {
      var input = $(this).find(".nationality-suggest-input");
      var list = $(this).find(".nationality-suggest-list");
kewarganegaraan baharu({ input: input, list: list });
})

Demo dan Muat Turun

Lihat DEMO Muat turun DEMO