تنفيذ JS الأصلي للمكون الإضافي الإكمال التلقائي

في المشاريع الفعلية ، من الأفضل استخدام المكونات الإضافية التي كتبها الآخرين لتنفيذ الوظائف ذات الصلة. ومع ذلك ، من أجل توفير الوقت والتكلفة ، تكون بعض المشاريع أكثر إلحاحًا وليس لديها ما يكفي من الوقت للكتابة بمفردك. حتى لو كتبت ، لا يزال يتعين عليك قضاء الكثير من الوقت في توافق التصحيح. ومع ذلك ، لغرض التعلم ، يمكنك استخدام وقت فراغك للكتابة بنفسك ، وقراءة بعض الأشياء الأصلية ، وصنع الإضافات وفقًا لأفكارك الخاصة ، بحيث يمكنك تحسين مستواك.

الحديث عن Autotemplete ، كثير من الناس استخدموها. ارجع إلى autotemplete.js ، وبعد ذلك يمكنك تنفيذ خيار المنسدلة المطالبة عند إدخال القيم في مربع الإدخال. إنه مشابه للوظيفة المذهلة لمربع البحث Baidu. دعنا نتحدث عن أفكارك الخاصة.

أضف حدث الإدخال إلى مربع الإدخال

1. رمز التوافق لحدث الإدخال هو كما يلي:

 addevt: 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 ؛ }}

يختلف حدث الإدخال عن الأحداث الأخرى. لا يدعم الإصدار السفلي من IE أحداث الإدخال ، ويمكنه فقط استخدام أحداث PropertyChange. تدعم الإصدار الأعلى من المتصفحات القياسية IE و W3C أحداث الإدخال.

2. احصل على البيانات عند تشغيل حدث الإدخال

هناك نوعان من البيانات هنا ، أحدهما عبارة عن صفيف كائن مباشر ، والآخر هو طلب AJAX لإرجاع البيانات

في هذا الوقت ، نحتاج إلى وظيفة طلب AJAX ، ويتم كتابة طلب الحصول على الحصول على هنا

 Get: function (url ، paraobj ، fn ، timeout) {var xhr = null ؛ جرب {//// متوافق مع Firefox ، chrom if (window.xmlHttprequest) {xhr = new xmlhttprequest () ؛ } ////// متوافق مع ie else if (window.activexObject) {xhr = new ActivexObject ("msxml2.xmlHtp") ؛ }} 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) ؛ }} ؛ var parastr = '' ؛ parastr += "؟" ؛ لـ (var prop in paraobj) {paraster + = prop + "=" + paraobj [prop] + "&" ؛ } xhr.open ('get' ، parastr! = "؟"؟ (url + parastr): url ، true) ؛ xhr.send () ؛ }

3. عندما يكون طلب AJAX ناجحًا وهناك بيانات ، قم بإنشاء مربع منسد وإضافة خيارات إلى مربع القائمة المنسد

قم بإنشاء رمز مربع منسد:

 CreateshowDiv: function () {/// إذا كان div المنسدلة موجودة بالفعل ، احذف var parentnode = this.autoElement.parentNode || this.autoElement.ParentElement ؛ var childnodes = parentnode.childnodes ؛ var showdiv = document.getElementById (this.config.showdivid) ؛ if (showdiv) {parentnode.removechild (showdiv) ؛ } // إنشاء div var div = divic.createlement ('div') ؛ div.id = this.config.showdivid ؛ // قم بتعيين نمط Div Div المنسدلة = this.config.style || {العرض: '200px' ، الارتفاع: 'Auto' ، BackgroundColor: '#1C5683' ، المؤشر: 'Pointer' ، display: 'block'} ؛ <br> لـ (var prop in style) {div.style [prop] = style [prop] ؛ } this.showdiv = div ؛ }

رمز خيار إلحاق:

 AppendChild: function (data) {var self = this ؛ var data = data ؛ 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.InsertAfter (self.showdiv ، self.autoElement) ؛ // إضافة حدث نقرة لـ Self.util.addevt (self.showdiv ، "انقر فوق" ، دالة (e) {var evt = e || window.event ؛ var target = evt.srcelement || self.closediv () ؛ }

ما سبق هو بعض الأفكار الرئيسية. الآن دعنا نلقي نظرة على كيفية تغليف هذه الرموز في كائن وجعلها مكونًا إضافيًا. في هذا الوقت نستخدم الإغلاق المجهول:

 (function (win) {var autocomplete = function () {this.init.apply (هذا ، وسيطات) ؛} autocomplete.prototype = {/// إضافة رمز التشغيل ذي الصلة init: {} ، /// معلمات التهيئة: {} ، //// أغلق مربع المنسدلة /////////////2 كائنات ، الأحداث ، الطلبات ، ووظائف عمليات DOM UNIEL: {addevt: {} ، /// إضافة Event insertafter: {} ، /// إضافة عنصر بعد الحصول على عنصر معين: الإكمال التلقائي (paraobj) .render () ؛

تمت إضافة الرمز الرئيسي ، وسنعرض رمز التنفيذ المحدد:

 (function (win) {var autocomplete = function () {this.init.apply (هذا ، الوسيطات) ؛} complete.prototype = {init: function () {var args = array.prototype.slice.call (enduments) ؛ if (args && args.lhulls> 0) {var config = 0] if (config && gettype.call (config) == "[كائن الكائن]") {// this.config = config ؛ URL: '' ، Ajax طلب URL Paraname: 'name' ، // ajax المعلمة SELECT: function () {} ، // enter reggerate at stirection ، '' // explement express} ؛ document.getElementById (self.config.id) ؛ paraobj = {} ؛ if (! CreateShowDiv: {/// إذا كان هناك div المنسدلة ، قم بحذف var parentnode = this.autoElement.parentnode || parentnode.removechild (showdiv) ؛ "Pointer" ، "Block"} ؛ i ++) OBJ 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.config.select.call (مفتاح ، val) ؛ {ele.addeventListener (evt ، flust) ؛ element insertafter: eLe ، targetele) {var parentNode = targetele. paraobj ، fn ، timeout) {var xhr = null ؛ XHR = New ActivexObject ('Microsoft.xmlhtp') ؛ } ؛ {New AutoCoft (Paraobj) .render () ؛

أدناه هو الرمز المستخدم

استدعاء الصفحة

 window.onload = function () {Autocomplete ({{id: 'txttest' ، // control id url: '/test4' ، // data paraname: 'name' ، textfiled: 'name' ، // struture name of text texm: 'id' ، // احصل على اسم السمة // النمط: {} ، // AJAX طلب URL SELECT: FUNCTION (VAL ، TEXT) {Alert (Val + '---' + text) ؛ }) ؛ }

رمز الخلفية كما يلي ، هنا أستخدم MVC

 public jsonresult test4 (اسم السلسلة) {var list = new list <studtude> () ؛ list.add (New Student {id = "1" ، name = "aaaaa"}) ؛ list.add (New Student {id = "2" ، name = "aacc"}) ؛ list.add (New Student {id = "3" ، name = "aabb"}) ؛ list.add (New Student {id = "4" ، name = "BBCC"}) ؛ if (! string.isnullorempty (name)) {list = list.where (p => p.name.contains (name)). tolist () ؛ } إرجاع json (قائمة ، jsonrequestbehavior.allowget) ؛}

الآن بعد الانتهاء من تنفيذ الوظيفة الأساسية ومكالماتها ، أصبحت العملية من البداية إلى النهاية مزعجة للغاية. يتم تنفيذ كل طريقة خطوة بخطوة ، دون الإشارة إلى المكتبات الأخرى ، ويجب أن تؤخذ توافق كل متصفح في الاعتبار.

ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.