input type =” text”要素の機能をオートコンプリートに拡張する

はじめに

ネットワークには、ある種の拡張機能を実装するための膨大な数のプラグインがあります。 残念ながら（残念ながら？）それらのすべて（私はひどく見ていましたか？）、レイアウトとスタイルのある種の完全なソリューションを提供します。 機能のみが必要な場合は、このプラグインが最適です。

アイデア

要素の機能をオートコンプリートに拡張します。 マークアップとスタイルのない機能のみ。 標準的な方法で相互作用を整理します。

サーバーリクエストの場合は、get ajaxリクエストを使用して、要素の値を入力に渡します。

属性を使用して要素を構成します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どこで：

url-サービスアドレス

lengthText –要求が行われるまでの最小文字数（デフォルト3）

timeWait-リクエストが行われるまでのミリ秒単位の時間（デフォルトは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プロジェクトはこちら