ในโครงการจริงควรใช้ปลั๊กอินที่เขียนโดยผู้อื่นเพื่อใช้ฟังก์ชั่นที่เกี่ยวข้อง อย่างไรก็ตามเพื่อประหยัดเวลาและค่าใช้จ่ายบางโครงการเร่งด่วนมากขึ้นและไม่มีเวลาพอที่จะเขียนด้วยตัวเอง แม้ว่าคุณจะเขียนคุณก็ยังต้องใช้เวลามากในการดีบักความเข้ากันได้ อย่างไรก็ตามเพื่อจุดประสงค์ในการเรียนรู้คุณสามารถใช้เวลาว่างในการเขียนด้วยตัวเองอ่านสิ่งที่ JS พื้นเมืองและสร้างปลั๊กอินตามความคิดของคุณเองเพื่อให้คุณสามารถปรับปรุงระดับของคุณได้
เมื่อพูดถึง Autotemplete หลายคนใช้มัน อ้างถึง AutoTemplete.js จากนั้นคุณสามารถใช้ตัวเลือกแบบดรอปดาวน์พรอมต์เมื่อป้อนค่าในกล่องอินพุต มันคล้ายกับฟังก์ชั่นพรอมต์ของ Baidu Search Box มาพูดคุยเกี่ยวกับความคิดของคุณเอง
เพิ่มเหตุการณ์อินพุตลงในกล่องอินพุต
1. รหัสความเข้ากันได้ของเหตุการณ์อินพุตมีดังนี้:
Addevt: ฟังก์ชั่น (ele, evt, fn) {if (document.addeventListener) {ele.addeventListener (evt, fn, false); } อื่นถ้า (document.attachevent) {ele.attachevent ('on' + (evt == "อินพุต"? "PropertyChange": evt), fn); } else {ele ['on' + (evt == "อินพุต"? "propertyChange": evt)] = fn; -เหตุการณ์อินพุตแตกต่างจากเหตุการณ์อื่น ๆ IE รุ่นล่างไม่รองรับเหตุการณ์อินพุตและสามารถใช้กิจกรรม PropertyChange เท่านั้น เบราว์เซอร์มาตรฐาน IE และ W3C รุ่นที่สูงกว่ารองรับเหตุการณ์อินพุต
2. รับข้อมูลเมื่อมีการเรียกเหตุการณ์อินพุต
มีข้อมูลสองรูปแบบที่นี่หนึ่งคืออาร์เรย์วัตถุที่ตั้งไว้โดยตรงและอีกรูปแบบหนึ่งคือคำขอ AJAX เพื่อส่งคืนข้อมูล
ในเวลานี้เราต้องการฟังก์ชั่นคำขอ AJAX และคำขอ GET จะเขียนไว้ที่นี่
รับ: ฟังก์ชั่น (url, paraobj, fn, หมดเวลา) {var xhr = null; ลอง {//// เข้ากันได้กับ firefox, chrom ถ้า (window.xmlhttprequest) {xhr = ใหม่ xmlhttprequest (); } ////// เข้ากันได้กับ IE else if (window.activexobject) {xhr = new ActiveXObject ("msxml2.xmlhttp"); }} catch (e) {// todo จัดการกับข้อยกเว้น xhr = new ActiveXObject ('Microsoft.xmlhttp'); } xhr.onreadyStateChange = function () {ถ้า (this.readyState == 4 && this.status == 200) {fn.call (นี่คือสิ่งนี้. responsetext); } else {settimeout (function () {xhr.abort ();}, หมดเวลา); - var parastr = ''; parastr += "?"; สำหรับ (var prop ใน paraobj) {parastr + = prop + "=" + paraobj [prop] + "&"; } xhr.open ('get', parastr! = "?"? (url + parastr): url, true); xhr.send (); -3. เมื่อคำขอ AJAX สำเร็จและมีข้อมูลให้สร้างกล่องแบบเลื่อนลงและเพิ่มตัวเลือกลงในกล่องแบบเลื่อนลง //// สร้าง Drop-Down Div
สร้างรหัสกล่องแบบเลื่อนลง:
createshowDiv: function () {/// หากมีการดึงลงแล้วให้ลบ var parentNode = this.autoElement.parentNode || this.autoelement.parentelement; var childNodes = parentNode.childNodes; var showdiv = document.getElementById (this.config.showdivid); if (showdiv) {parentNode.removeChild (showdiv); } // สร้าง pull-down div var div = document.createElement ('div'); div.id = this.config.showdivid; // ตั้งค่าสไตล์ Div Div Div-div style = this.config.style || {width: '200px', ความสูง: 'auto', backgroundColor: '#1C5683', เคอร์เซอร์: 'ตัวชี้', แสดง: 'block'}; <br> สำหรับ (var prop ในสไตล์) {div.style [prop] = style [prop]; } this.showdiv = div; -ผนวกรหัสตัวเลือก:
AppendChild: ฟังก์ชั่น (ข้อมูล) {var self = this; ข้อมูล var = ข้อมูล; var fragment = document.createdocumentFragment (); สำหรับ (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 (เด็ก); } self.showdiv.appendchild (แฟรกเมนต์); self.util.insertfter (self.showdiv, self.autoelement); // เพิ่มเหตุการณ์คลิกสำหรับกล่องดรอปดาวน์ self.util.addevt (self.showdiv, 'คลิก', ฟังก์ชั่น (e) {var evt = e || window.event; var target = evt.srelement || evt.target; self.closediv (); -ข้างต้นเป็นแนวคิดหลักบางประการ ตอนนี้ลองมาดูวิธีการห่อหุ้มรหัสเหล่านี้ลงในวัตถุและทำให้ปลั๊กอิน ในเวลานี้เราใช้การปิดที่ไม่ระบุชื่อ:
(ฟังก์ชั่น (win) {var autocomplete = function () {this.init.apply (สิ่งนี้, อาร์กิวเมนต์);} autocomplete.prototype = {//// เพิ่มรหัสการทำงานที่เกี่ยวข้องเริ่มต้น: {}, /// พารามิเตอร์การเริ่มต้นการแสดงผล {}, //// ปิดกล่องดรอปดาวน์ ////////////ife วัตถุเหตุการณ์การร้องขอและฟังก์ชั่นสำหรับการทำงานของโหนด DOM UTIL: {addevt: {}, /// เพิ่มการแทรกเหตุการณ์: {}, /// เพิ่มองค์ประกอบ Autocomplete (Paraobj) .render ();}}) (หน้าต่าง)มีการเพิ่มรหัสหลักและเราจะแสดงรหัสการใช้งานเฉพาะ:
(ฟังก์ชั่น (win) {var autocomplete = function () {this.init.apply (นี่, อาร์กิวเมนต์);} autocomplete.prototype = {init: function () {var args = array.prototype.slice.call (อาร์กิวเมนต์); ถ้า (args && args.length> 0) Object.prototype.toString; // การตั้งค่าสไตล์ของ URL แบบดรอปดาวน์ที่แสดง: ', // AJAX ร้องขอ URL Paraname:' NAME ', // AJAX ที่ร้องขอพารามิเตอร์ SELECT: FUNCTION () {}, // เหตุการณ์ที่เกิดขึ้นเมื่อเลือกตัวเลือก = document.getElementById (self.config.id); autoelement = autoElement; paraobj = {}; if (! self.config.url && self.config.data) {self.createshowdiv (); createshowDiv: ฟังก์ชั่น () {/// หากมีการดึงลงไปแล้วให้ลบ var parentNode = this.autoelement.parentNode || this.autoElement.parentelement; ParentNode.RemoveChild (showdiv); 'Pointer', Display: 'block'}; {var obj = data [i]; obj [self.config.valuefiled]); self.util.addevt (self.showdiv, 'คลิก', ฟังก์ชั่น (e) {var evt = e || window.event; var target = evt.srceneement || evt.target; var key = target.getAttribute ("key"); var val = target.innerhtml; self.config.select.call (self, key, val);}); (document.addeventListener) {ele.addeventListener (evt, fn, false); FN; }, /// get request get: url, paraobj, fn, timeout) {var xhr = null; (e) {// toDo จัดการกับข้อยกเว้น xhr = new ActiveXobject ('Microsoft.xmlhttp'); }, หมดเวลา); = ฟังก์ชั่น (paraobj) {ใหม่อัตโนมัติ (paraobj) .render ();}}) (หน้าต่าง)ด้านล่างคือรหัสที่ใช้
หน้าโทร
window.onload = function () {autocomplete ({id: 'txttest', // url control id: '/home/test4', // data paraname: 'name', textFiled: 'ชื่อ', // ชื่อแอตทริบิวต์ของข้อความที่แสดง: // AJAX ที่ร้องขอ URL เลือก: ฟังก์ชั่น (val, text) {Alert (val + '---' + ข้อความ); - -รหัสพื้นหลังมีดังนี้ที่นี่ฉันใช้ MVC
สาธารณะ jsonResult test4 (ชื่อสตริง) {var list = รายการใหม่ <student> (); list.add (นักเรียนใหม่ {id = "1", name = "aaaaa"}); list.add (นักเรียนใหม่ {id = "2", name = "aacc"}); list.add (นักเรียนใหม่ {id = "3", name = "aabb"}); list.add (นักเรียนใหม่ {id = "4", name = "bbcc"}); if (! string.isnullorEmpty (ชื่อ)) {list = list.where (p => p.name.contains (ชื่อ)). tolist (); } return json (รายการ, jsonrequestbehavior.allowget);}ตอนนี้การใช้งานฟังก์ชั่นพื้นฐานและการโทรเสร็จสิ้นกระบวนการตั้งแต่ต้นจนจบนั้นค่อนข้างลำบาก แต่ละวิธีจะดำเนินการทีละขั้นตอนโดยไม่ต้องอ้างถึงไลบรารีอื่น ๆ และความเข้ากันได้ของแต่ละเบราว์เซอร์จะต้องนำมาพิจารณา
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน