في الآونة الأخيرة ، عندما يكون هناك الكثير من الخيارات المنسدلة ، آمل أن أدخل كلمات رئيسية للبحث عن المحتوى ، لكن المشروع كان متسرعًا للغاية من قبل ، لذلك لم يكن لدي وقت للقيام بذلك لأنني آمل أن أكتب بعض المحتوى مع JS الأصلي ، وبالتالي فإن المكون الإضافي يستخدم JS الأصلي لكتابة الفكرة التالية
الخطوة 1: تنفيذ fninit يهيئة بعض الحقول
الخطوة 2: تحميل Div في مربع البحث
الخطوة 3: تنفيذ وظيفة البحث ، وحذف العقدة الأصلية وتحميل العقدة الجديدة
الخطوة 4: تعيين القيمة عند النقر أو الدخول
شفرة:
AutoCOPTE.JS
/** * Summary AutoComplete * description يقوم مربع الإدخال تلقائيًا بإرداد الخيار المنسدلة * @Varvent 0.0.1 * file autocomplete.js * author cangowu * contact [email protected] * copyright cangowu. * هذا مربع إدخال منسول يتم إكمال البحث تلقائيًا استنادًا إلى JS الأصلي. * يمكنك الضغط على مفاتيح الماوس لأعلى ولأسفل والنقر مباشرة مع الماوس * حدد خيار البحث ، وهناك تعليقات في بعض الأماكن الرئيسية * * أمثلة هي: * CSDN Blog: http://blog.csdn.net/wzgdjm/article/details/51122615 * github: () {Function AutoComplete () {if (! Paraname: '' ، textfiled: '، // اسم السمة من قيمة النص المعروضة:' '، احصل على اسم السمة لأسلوب القيمة: {} ، {} ، // || odefault adefault.vault. يتم تمريرها في البيانات ، لا تحصل على البيانات على البيانات adata var stextfield = this.stextFiled ؛ var that = this ؛ Domdiv.Style = 'aboort' ؛ keyup حدث لإدخال that.util.fnaddevent (that.dominput ، 'keyup' ، function (event) {that.fnsearch (event) ؛}) ؛ 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 = length - 1 ؛ } آخر إذا (this.index == -1) {this.obj.value = this.ssearchValue ؛ } this.dominput.value = this.domdiv.childnodes [this.index] .text ؛ this.fnchangeclass () ؛ } آخر if (event.keycode == 13) {this.fnloadSearchContent () ؛ this.fnshowdiv () ؛ //this.domdiv.style.display = this.domdiv.style.display === 'none'؟ "كتلة": "لا شيء" ؛ this.index = -1 ؛ } آخر {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 = 'none' ؛ يعود؛ } جرب {var reg = new regexp ("(" + StrimsearchValue + ")" ، "i") ؛ } catch (e) {return ؛ } // Search and Add New Node var ndivindex = 0 ؛ لـ (var i = 0 ؛ i <this.adata.length ؛ i ++) {if (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 (this) ؛ domdiv.onmouseover = this.fnautoonMouseover (هذا ، ndivindex) ؛ domdiv.innerhtml = this.adata [i] [this.stextfiled] .replace (reg ، "<strong> $ 1 </strong>") ؛ ndivindex ++ ؛ }}} ، fnsetValue: function (that) {return function () {that.dominput.value = this.text ؛ that.domdiv.style.display = 'none' ؛ }} ، fnautoonMouseover: function (that ، idx) {return function () {that.index = idx ؛ that.fnchangeClass () ؛ }} ، fnchangeclass: function () {var that = this ؛ var length = that.domdiv.children.length ؛ لـ (var j = 0 ؛ j <length ؛ j ++) {if (j! = that.index) {that.domdiv.childnodes [j] .style.backgroundColor = '' ؛ that.domdiv.childnodes [j] .style.color = '#000' ؛ } آخر {that.domdiv.childnodes [j] .style.backgroundColor = 'Blue' ؛ that.domdiv.childnodes [j] .style.color = '#fff' ؛ }}} ، fnshowdiv: function () {if (this.domdiv.children.length! == 0) {this.domdiv.style.display = this.domdiv.style.display === 'none'؟ "كتلة": "لا شيء" ؛ }} ، util: {// طريقة الواجهة العامة fninsertafter: function (ele ، targetele) {var parentnode = targetele.parentnode || TargetEle.ParentElement ؛ if (parentnode.lastchild == targetele) {parentnode.appendchild (eLe) ؛ } آخر {parentnode.insertBefore (eLe ، targetele.nextsibling) ؛ }} ، fnaddevent: function (ele ، evt ، fn) {if (document.addeventListener) {ele.addeventListener (evt ، fn ، false) ؛ } آخر إذا (document.attachevent) {ele.attachevent ('on' + (evt == "input"؟ "propertyChange": evt) ، fn) ؛ } آخر {eLe ['on' + (evt == "input"؟ "propertyChange": evt)] = fn ؛ }} ، fnget: function (url ، fn ، timeout) {var xhr = null ؛ جرب {if (window.xmlHttPrequest) {xhr = new xmlhttprequest () ؛ } آخر if (window.activexobject) {xhr = new ActiveXObject ("msxml2.xmlhttp") ؛ }} catch (e) {// todo التعامل مع الاستثناء xhr = new ActivexObject ('microsoft.xmlhttp') ؛ } xhr.onreadyStateChange = function () {if (this.readyState == 4 && this.status == 200) {fn.call (this ، this.responsetext) ؛ } آخر {setTimeOut (function () {xhr.abort () ؛} ، timeout) ؛ }} ؛ XHR.Open ('get' ، url ، true) ؛ xhr.send () ؛ }}} window.autocomplete = function (الخيار) {var aOption = array.prototype.slice.call (وسيطات) ؛ لـ (var i = 0 ؛ i <aOption.length ؛ i ++) {var explete = new autocomplete () ؛ outoCOpte.fninit (aOption [i]) ؛ outoCOPTE.FNRender () ؛ }}}) (نافذة) ؛
index.html
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8" <title> العنوان </title> </head> <body> <viv> <input type = "text" id = "txtTest"> <biv> <br> <div> src = "autocomplete.js"> </script> <script> window.onload = function () {var option = {id: 'txtTest' ، // control data: [{"id": "1" ، "name": "aaaa"} ، {"id": "2" ، "bbbwu bb"} ، {"id": "2" ، "name": "bbbzbb"}] ، paraname: 'name' ، textfiled: 'name' ، // اسم السمة للنص المعروض المرفق: } // حدث الحدث عند تحديد خيار} ؛ var Option1 = {id: 'txttest1' ، // control id url: 'data.json' ، // data paraname: 'name' ، textfiled: 'name' ، // اسم السمة للنص المعروض المودع: 'id' ، // احصل على اسم سمة القيمة لقيمة الاختيار: الدالة (val ، text) {alert (val + '' } // حدث الحدث عند تحديد خيار} ؛ الإكمال التلقائي (الخيار ، الخيار 1) ؛ } </script> </body> </html>data.json
[{"id": "1" ، "name": "aaaaa"} ، {"id": "2" ، "name": "bbbbb"} ، {"id": "3" ، "name": "ccccccc"}]ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.