इनपुट प्रकार = "टेक्स्ट" तत्व की कार्यक्षमता को स्वतः पूर्ण करने के लिए

परिचय

कुछ प्रकार के एक्सटेंशन को लागू करने के लिए नेटवर्क पर प्लग-इन की एक बड़ी संख्या है। दुर्भाग्य से (सौभाग्य से?) उनमें से सभी (शायद मैं बुरी तरह से देख रहा था?), लेआउट और शैलियों में किसी तरह का संपूर्ण समाधान प्रदान करते हैं। यदि आपको केवल कार्यक्षमता की आवश्यकता है, तो यह प्लगइन आपके लिए है।

विचार

तत्व की कार्यक्षमता को स्वतः पूर्ण करने के लिए विस्तारित करें। केवल मार्कअप और शैलियों के बिना कार्यक्षमता। सहभागिता को एक मानक तरीके से व्यवस्थित करें।
सर्वर अनुरोधों के लिए, इनपुट के लिए तत्व के मूल्य को पार करते हुए, अजाक्स अनुरोध प्राप्त करें।
किसी तत्व को विशेषताओं के माध्यम से कॉन्फ़िगर करें:

<input id="comboBox" data-options='{"url":"Home/Load","lengthText": 4,"timeWait":300 }' type="text" />  <input id="comboBox1" data-url="Home/Load" type="text" /> 

जहां:
url - सेवा का पता
लंबाई-वर्णों की अधिकतम संख्या जिसके बाद अनुरोध किया जाता है (डिफ़ॉल्ट 3)
टाइमविट - एमएस में समय जिसके बाद एक अनुरोध किया जाता है (डिफ़ॉल्ट 300)

इवेंट सिस्टम के माध्यम से व्यवस्थित करने के अनुरोध की स्थिति के बारे में डेवलपर को सूचित करता है।

query_start - एक क्वेरी शुरू करें
query_end - क्वेरी का अंत
query_data - क्वेरी परिणाम प्राप्त करें
query_reset - परिणाम रीसेट करें
query_error - क्वेरी त्रुटि

सब कुछ jQuery प्लगइन में लपेटें (v 1.7) - क्वेरी ()

 $().ready(function () { $("#comboBox") .query() .bind("query_data", function (e, data) { //     –   <div id=”panel”/> }) .bind("query_error", function (e, data) { //    }) .bind("query_reset", function () { //  <div id=”panel”/> }) .bind('query_start query_end', function (e) { //       –     $(this).css({ backgroundColor: e.type == "query_start" ? "#fdf5e6" : "#FFF" }); }); }); 

कार्यान्वयन

 (function ($) { function query(target) { this.$target = $(target); //   this.options = this.$target.data('options') || { url: this.$target.data("url") }; if (!this.options.url) //  url -    throw Error(" ..."); //    this.options = $.extend({ lengthText: 3, timeWait: 300 }, this.options); }; query.prototype = { handler: function (val) { //            if(this.def ) this.def.abort() ; if (val.length < this.options.lengthText) { //     this.$target.trigger('query_reset'); return; }; var self = this; //         timeWait clearTimeout(this.timer); //    c  timeWait this.timer = setTimeout(function () { self._ajax(val); }, this.options.timeWait); }, _ajax: function (val) { var self = this; this.$target.trigger('query_start');//   this.def = $.get(this.options.url, { val: val }) //    .done(function (data) { self.$target.trigger('query_data', [data]); }) .error(function (data) { self.$target.trigger('query_error', [data]); }) //  .always(function () { self.$target.trigger('query_end'); }); //   } }; $.fn.query = function () { this.each(function () { $(this) .data("query", new query(this)) //        .bind('keyup', function (e) { //         $(this).data("query").handler($(this).val()); }); }); return this; }; } (jQuery)); 

अंत में, मैं ASP.NET MVC नियंत्रक की कार्रवाई के लिए कोड दूंगा।
Json यहाँ लौटा है, हालांकि कोई भी वापसी मूल्यों के प्रकार पर कोई प्रतिबंध नहीं लगाता है। उदाहरण के लिए, यह एक आंशिक दृश्य में html हो सकता है।

  public ActionResult Load(string val) { var data = new { id=1, name="..."}; //   .     val //throw new Exception("Error", null); //System.Threading.Thread.Sleep(1000); return Json(data, JsonRequestBehavior.AllowGet); } 

ASR.NET MVC3 प्रोजेक्ट यहां