เมื่อเร็ว ๆ นี้เมื่อมีตัวเลือกแบบเลื่อนลงมากเกินไปฉันหวังว่าจะป้อนคำหลักเพื่อค้นหาเนื้อหา แต่โครงการก็เร่งรีบเกินไปมาก่อนดังนั้นฉันจึงไม่มีเวลาทำเพราะฉันหวังว่าจะเขียนเนื้อหาบางอย่างด้วย JS ดั้งเดิมดังนั้นปลั๊กอินใช้ JS ดั้งเดิมเพื่อเขียนแนวคิดต่อไปนี้
ขั้นตอนที่ 1: การใช้งาน FNINIT เริ่มต้นบางฟิลด์
ขั้นตอนที่ 2: โหลด div ในช่องค้นหา
ขั้นตอนที่ 3: ใช้ฟังก์ชั่นการค้นหาลบโหนดดั้งเดิมและโหลดโหนดใหม่
ขั้นตอนที่ 4: ตั้งค่าเมื่อคลิกหรือป้อน
รหัส:
Autocomplete.js
/** * @Summary Autocomplete * @description กล่องอินพุตจะดึงตัวเลือกแบบเลื่อนลงโดยอัตโนมัติ * @version 0.0.1 * @file Autocomplete.js * @author Cangowu * @contact [email protected] * @copyright Copyright 2016 Cangowu * นี่คือกล่องอินพุตแบบเลื่อนลงที่ทำการค้นหาโดยอัตโนมัติตาม JS ดั้งเดิม * คุณสามารถกดปุ่มเมาส์ขึ้นและลงและคลิกโดยตรงด้วยเมาส์ * เลือกตัวเลือกการค้นหาและมีความคิดเห็นในสถานที่สำคัญบางแห่ง * * ตัวอย่างคือ: * บล็อก csdn: http://blog.csdn.net/wzgdjm/article/details/51122615 () {ฟังก์ชั่น Autocomplete () {if (! (อินสแตนซ์ของ Autocomplete)) {ส่งคืนใหม่อัตโนมัติ ()} this.sesearchValue = '' Paraname: '', textFiled: '', // ชื่อแอตทริบิวต์ของค่าข้อความที่แสดง: '', // รับชื่อแอตทริบิวต์ของรูปแบบค่า: {}, // การตั้งค่าสไตล์ของ Drop-down Div URL ที่แสดง: ' || oDefault.id; this.aData = _option.data || oDefault.data; this.paraName = _option.paraName || oDefault.paraName; this.sTextFiled = _option.textFiled || oDefault.textFiled; this.sValueFiled = _option.valueFiled || oDefault.valueFiled; this.style = _option.style || ข้อมูลเป็นอย่างอื่นใช้ข้อมูลเพื่อดึงข้อมูลถ้า (this.surl! == '' && this.adata.length === 0) {var that = this.util.fnget (this.surl, function (data) {console.log this.adata.sort (ฟังก์ชั่น (a, b) {return a [stextfield]> b [stextfield];}); DIV โฮสติ้งตัวเลือกที่ตามมาบางอย่างถ้า (นั่นคือ {var domdiv = document.createelement ('div'); domdiv.style.border = '1px solid #a9a9a9'; That.util.fnaddevent (that.dominput, 'keyup', ฟังก์ชั่น (เหตุการณ์) {that.fnsearch (เหตุการณ์);}); this.fnloadSearchContent (); this.dominput.value = this.ssearchValue; } this.dominput.value = this.domdiv.childnodes [this.index] .Text; this.fnchangeclass (); } อื่นถ้า (event.keycode == 38) {this.index--; if (this.index <= -1) {this.index = ความยาว - 1; } อื่นถ้า (this.index == -1) {this.obj.value = this.ssearchValue; } this.dominput.value = this.domdiv.childnodes [this.index] .Text; this.fnchangeclass (); } อื่นถ้า (event.keycode == 13) {this.fnloadSearchContent (); this.fnshowdiv (); //this.domdiv.style.display = this.domdiv.style.display === 'ไม่มี'? 'บล็อก': 'ไม่มี'; this.index = -1; } else {this.index = -1; }}}, fnloadSearchContent: function () {// ลบโหนดเด็กทั้งหมดในขณะที่ (this.domdiv.haschildnodes ()) {this.domdiv.removechild (this.domdiv.firstchild); } // ตั้งค่าการค้นหา this.ssearchValue = this.dominput.value; // หากค่าว่างเปล่าให้เลือกออกจาก Var StrimsearchValue = this.ssearchValue.replace (/(^/s*) | (/s*$)/g, ''); if (strimsearchValue == "") {this.domdiv.style.display = 'ไม่มี'; กลับ; } ลอง {var reg = new regexp ("(" + strimsearchValue + ")", "i"); } catch (e) {return; } // ค้นหาและเพิ่มโหนดใหม่ var ndivindex = 0; สำหรับ (var i = 0; i <this.adata.length; i ++) {ถ้า (reg.test (this.adata [i] [this.stextfiled])) {var domdiv = document.createElement ("div"); //div.classname="auto_onmouseout "; domdiv.text = this.adata [i] [this.stextfiled]; domdiv.onclick = this.fnsetValue (นี่); domdiv.onmouseover = this.fnautoonmouseover (นี่, ndivindex); domdiv.innerhtml = this.adata [i] [this.stextfiled] .replace (reg, "<strong> $ 1 </strong>"); // ตัวละครที่ค้นหาแสดงสิ่งนี้ addomdiv.appendchild (domdiv); Ndivindex ++; }}}, fnSetValue: ฟังก์ชั่น (นั่น) {return function () {That.domInput.value = this.text; That.domdiv.style.display = 'ไม่มี'; }}, fnautoonMouseOver: ฟังก์ชั่น (นั่น, idx) {return function () {that.index = idx; นั่น fnchangeclass (); }}, fnchangeclass: function () {var that = this; var length = That.domdiv.children.length; สำหรับ (var j = 0; j <length; j ++) {ถ้า (j! = that.index) {that.domdiv.childnodes [j] .style.backgroundColor = ''; That.domdiv.childnodes [j] .style.color = '#000'; } else {That.domdiv.childnodes [j] .style.backgroundColor = 'blue'; That.domdiv.childnodes [j] .style.color = '#fff'; }}}, fnshowDiv: function () {ถ้า (this.domdiv.children.length! == 0) {this.domdiv.style.display = this.domdiv.style.display === 'ไม่มี'? 'บล็อก': 'ไม่มี'; }}, util: {// วิธีการสาธารณะอินเทอร์เฟซ fninsertafter: ฟังก์ชั่น (ele, targetele) {var parentNode = targetele.parentNode || Targetele.parentelement; if (parentNode.lastChild == Targetele) {parentNode.AppendChild (ele); } else {parentNode.insertbefore (ele, targetele.nextsibling); }}, fnaddevent: function (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; }}, fnget: function (url, fn, หมดเวลา) {var xhr = null; ลอง {if (window.xmlhttprequest) {xhr = ใหม่ xmlhttprequest (); } 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 ();}, หมดเวลา); - xhr.open ('get', url, true); xhr.send (); }}} window.autocomplete = function (ตัวเลือก) {var aoption = array.prototype.slice.call (อาร์กิวเมนต์); สำหรับ (var i = 0; i <aoption.length; i ++) {var autocomplete = new Autocomplete (); Autocomplete.fninit (aoption [i]); Autocomplete.fnrender (); } } })(หน้าต่าง);
index.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <อินพุต type = "text" id = "txttest"> </div> <br> src = "autocomplete.js"> </script> <pristr> window.onload = function () {var oppect = {id: 'txttest', // ข้อมูลรหัสควบคุม: [{"id": "1", "ชื่อ": "aaaaa"}, {"id": "2" "bbbwu bb"}, {"id": "2", "ชื่อ": "bbbzbb"}], paraname: 'ชื่อ', textfiled: 'ชื่อ', // ชื่อแอตทริบิวต์ของข้อความที่แสดง: 'id' } // เหตุการณ์ทริกเกอร์เมื่อเลือกตัวเลือก}; VAR OPTION1 = {id: 'txtTest1', // url id ird control: 'data.json', // data paraname: 'ชื่อ', textFiled: 'ชื่อ', // ชื่อแอตทริบิวต์ของข้อความที่แสดง: 'id', // รับชื่อแอตทริบิวต์ของค่าของค่าตัวเลือก } // เหตุการณ์ทริกเกอร์เมื่อเลือกตัวเลือก}; การเติมข้อความอัตโนมัติ (ตัวเลือกตัวเลือก 1); } </script> </body> </html>data.json
[{"id": "1", "ชื่อ": "aaaaa"}, {"id": "2", "ชื่อ": "bbbbb"}, {"id": "3", "ชื่อ": "cccccc"}]ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript