Extending the functionality of the input type = ”text” element to autocompet

Introduction

In the network there are a huge number of plugins for the implementation of what kind of extensions. Unfortunately (fortunately?) They all (maybe I was looking bad?), Offer some kind of complete solution in markup and styles. If you need only functionality, then this plugin is for you.

Idea

Extend the functionality of the element to autocomplete. Only functional without markup and styles. To organize the interaction in a standard way.
For requests to the server, use the get ajax request, passing the element value to the input.
Customize element through attributes:

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

Where:
url - address of the service
lengthText - the minimum number of characters after which the request is made (default 3)
timeWait - time in ms after which a request is made (default 300)

Developer alerts about the status of the request to organize through the event system.
')
query_start - request start
query_end - the end of the query
query_data - getting query result
query_reset - reset results
query_error - request error

Wrap everything in jQuery plugin (v 1.7) - query ()

 $().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" }); }); }); 

Implementation

 (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)); 

In conclusion, I will give the code for the action of the ASP.NET MVC controller.
Here json is returned, although no one imposes any restrictions on the type of return values. For example, it may be html in partial representation.

  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 project here