Dalam proyek aktual, yang terbaik adalah menggunakan plug-in yang ditulis oleh orang lain untuk mengimplementasikan fungsi terkait. Namun, untuk menghemat waktu dan biaya, beberapa proyek lebih mendesak dan tidak punya cukup waktu untuk menulis sendiri. Bahkan jika Anda menulis, Anda masih harus menghabiskan banyak waktu debugging kompatibilitas. Namun, untuk tujuan belajar, Anda dapat menggunakan waktu luang untuk menulis sendiri, membaca beberapa hal JS asli, dan membuat plugin sesuai dengan ide -ide Anda sendiri, sehingga Anda dapat meningkatkan level Anda.
Berbicara tentang autotemplete, banyak orang telah menggunakannya. Lihat AutotempleTe.js, dan kemudian Anda dapat mengimplementasikan opsi drop-down prompt saat memasukkan nilai di kotak input. Ini mirip dengan fungsi cepat kotak pencarian Baidu. Mari kita bicara tentang ide -ide Anda sendiri.
Tambahkan acara input ke kotak input
1. Kode kompatibilitas acara input adalah sebagai berikut:
Addevt: function (ele, evt, fn) {if (document.addeventlistener) {ele.addeventListener (evt, fn, false); } else if (document.attachevent) {ele.attachevent ('on' + (evt == "input"? "propertychange": evt), fn); } else {ele ['on' + (evt == "input"? "PropertyChange": evt)] = fn; }}Acara input berbeda dari acara lain. Versi IE yang lebih rendah tidak mendukung acara input, dan hanya dapat menggunakan acara PropertyChange. Versi IE dan W3C standar yang lebih tinggi mendukung acara input.
2. Dapatkan data saat acara input dipicu
Ada dua bentuk data di sini, satu adalah array objek set langsung, dan yang lainnya adalah permintaan AJAX untuk mengembalikan data
Saat ini, kami memerlukan fungsi permintaan AJAX, dan permintaan dapatkan ditulis di sini
get: function (url, paraobj, fn, timeout) {var xhr = null; Coba {//// kompatibel dengan firefox, chrom if (window.xmlhttpRequest) {xhr = new xmlhttpRequest (); } ////// Kompatibel dengan IE lain if (window.activexObject) {xhr = new ActiveXObject ("msxml2.xmlhttp"); }} catch (e) {// TODO menangani pengecualian xhr = new ActivexObject ('microsoft.xmlhttp'); } xhr.onReadyStateChange = function () {if (this.readystate == 4 && this.status == 200) {fn.call (this, this.responsetext); } else {setTimeout (function () {xhr.abort ();}, timeout); }}; var parastr = ''; parastr += "?"; untuk (var prop di paraobj) {parastr + = prop + "=" + paraobj [prop] + "&"; } xhr.open ('get', parastr! = "?"? (url + parastr): url, true); xhr.send (); }3. Ketika permintaan AJAX berhasil dan ada data, buat kotak drop-down dan tambahkan opsi ke kotak drop-down //// Buat div tarik-turun
Buat kode kotak drop-down:
createShowDiv: function () {/// Jika div pull-down sudah ada, hapus var parentNode = this.autoelement.parentnode || this.autoelement.parentelement; var childnodes = parentNode.childnodes; var showdiv = document.getElementById (this.config.showdivid); if (showdiv) {parentNode.removechild (showdiv); } // Buat pull-down div var div = document.createelement ('div'); div.id = this.config.showdivid; // Atur gaya drop-down div var style = this.config.style || {width: '200px', tinggi: 'otomatis', latar belakangcolor: '#1c5683', kursor: 'pointer', tampilan: 'blok'}; <br> untuk (var prop dalam gaya) {div.style [prop] = style [prop]; } this.showdiv = div; }Tambahkan kode opsi:
AppendChild: function (data) {var self = this; var data = data; var fragment = document.createDocumentFragment (); untuk (var i = 0; i <data.length; i ++) {var obj = data [i]; var child = document.createElement ('div'); child.style.width = self.showdiv.style.width; child.style.border = '1px'; child.style.borderstyle = 'solid'; child.style.bordertopcolor = 'white'; Child.setAttribute ('Key', obj [self.config.valuefiled]); child.innerHtml = obj [self.config.textfiled]; Fragment.AppendChild (anak); } self.showdiv.appendchild (fragmen); self.util.insertafter (self.showdiv, self.autoelement); // Tambahkan acara klik untuk kotak drop-down self.util.addevt (self.showdiv, 'click', function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target.getattribute ("key"); var val = target.target; var key = target.getattribute ("key"); var val = target. self.config.select.call (self, kunci, val); }Di atas adalah beberapa ide utama. Sekarang mari kita lihat cara merangkum kode-kode ini ke dalam suatu objek dan menjadikannya plug-in. Saat ini kami menggunakan penutupan anonim:
(function (win) {var autoComplete = function () {this.init.Apply (this, argumen);} autocomplete.prototype = {//// Tambahkan kode operasi yang relevan init: {}, /// parameter inisialisasi render: {}, createShowWdiv: {}, /// tampilkan inisialisasi: {{}, createShowWdiv: {}, /// create: {{{{}, // create {{{{{{{{{{{{{{{{{{{{{{{{/ {}, //// Tutup kotak drop-down ///////objek alat, peristiwa, permintaan, dan fungsi untuk operasi simpul dom util: {addevt: {}, /// Tambahkan acara insertAfter: {}, /// Tambahkan elemen setelah elemen tertentu get: {} ///////ax get}}}}} {} {{{{{{{{{{{{{{{{{{} {{{{Ajax tertentu AutoComplete (paraobj) .render ();}}) (jendela)Kode utama telah ditambahkan, dan kami akan menampilkan kode implementasi spesifik:
(function (win) {var autoComplete = function () {this.init.Apply (this, argumen);} autoComplete.prototype = {init: function () {var args = array.prototype.slice.call (arguments); if (args && array.length> 0) {varprotype.call (argumen); if (args && array.length> 0) {varprotype = arguments); if (args && array. (config && getType.call (config) == "[Object Object]") {// this.config = config; ', // Ajax yang diminta paraname:' name ', // Ajax Parameter Pilih: Function () {}, // Event dipicu saat memilih opsi, showdivid:' '// Tarik ke bawah untuk memilih ID Area}; document.geteLementById (self.config.id); paraobj = {}; if (! CreateShowDiv:) {/// Jika ada div yang ada, hapus var parentNode = this.autoelement.parentnode || ParentNode.Removechild (showdiv);} // Buat div var div = document.createelement ('div'); Tampilan: untuk (var prop dalam gaya) {div.Style [prop] = gaya [prop]; = Data [I]; OBJ [self.config.valuefiled]); self.util.addevt (self.showdiv, 'click', function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; var key = target.getAttribute ("key"); var val = target.innerhtml; self.Autoelement.valeelement.valeAelement.valeAelement. self.config.select.call (self, key, val); {ELE.AddeventListener (evt, fn, false); elemen setelah insertAfter: Function (ELE, Targetele) {var ParentNode = Targetele.parentnode || Fungsi (URL, ParaObj, FN, Timeout) {Var XHR = NULL; pengecualian xhr = ActivexObject baru ('microsoft.xmlhttp'); }}; (paraobj) {AutoComplete baru (paraobj) .render ();Di bawah ini adalah kode yang digunakan
Panggilan halaman
window.onload = function () {autoComplete ({id: 'txttest', // control id url: '/home/test4', // data paraname: 'name', textfiled: 'name', // atribute name dari teks yang ditampilkan: 'ID', // dapatkan nama atribut dari nilai yang diterapkan // {o {o {o {o {{o. // AJAX yang diminta URL SELECT: FUNGSI (VAL, TEXT) {ALERT (VAL + '---' + Teks); }); }Kode latar belakang adalah sebagai berikut, di sini saya menggunakan MVC
public JsonResult test4 (name string) {var list = Daftar baru <Sahen> (); list.add (siswa baru {id = "1", name = "aaaaa"}); list.add (siswa baru {id = "2", name = "aacc"}); list.add (siswa baru {id = "3", name = "aabb"}); list.add (siswa baru {id = "4", name = "bbcc"}); if (! string.isnullorEmpty (name)) {list = list.where (p => p.name.contains (name)). Tolist (); } return json (daftar, jsonrequestbehavior.allowget);}Sekarang implementasi dan panggilan fungsi dasar selesai, proses dari awal hingga akhir cukup merepotkan. Setiap metode diimplementasikan langkah demi langkah, tanpa merujuk ke perpustakaan lain, dan kompatibilitas masing -masing browser harus diperhitungkan.
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.