autocomplete 自动填充 combobox

autocomplete

autocomplete有两种

一种是 jquery ui里的 autocomplete http://jqueryui.com/autocomplete/

在这里我使用的是 combobox 这种复合的下拉加输入的方式,其实这个使用相当方便,就是按正常的网页就可以了.

先看一下原代码:

 <!doctype html>

 <html lang="en">

 <head>

   <meta charset="utf-8">

   <title>jQuery UI Autocomplete - Combobox</title>

   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

   <script src="//code.jquery.com/jquery-1.10.2.js"></script>

   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

   <link rel="stylesheet" href="/resources/demos/style.css">

   <style>

   .custom-combobox {

     position: relative;

     display: inline-block;

   }

   .custom-combobox-toggle {

     position: absolute;

     top: 0;

     bottom: 0;

     margin-left: -1px;

     padding: 0;

   }

   .custom-combobox-input {

     margin: 0;

     padding: 5px 10px;

   }

   </style>

   <script>

   (function( $ ) {

     $.widget( "custom.combobox", {

       _create: function() {

         this.wrapper = $( "<span>" )

           .addClass( "custom-combobox" )

           .insertAfter( this.element );

         this.element.hide();

         this._createAutocomplete();

         this._createShowAllButton();

       },

       _createAutocomplete: function() {

         var selected = this.element.children( ":selected" ),

           value = selected.val() ? selected.text() : "";

         this.input = $( "<input>" )

           .appendTo( this.wrapper )

           .val( value )

           .attr( "title", "" )

           .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )

           .autocomplete({

             delay: 0,

             minLength: 0,

             source: $.proxy( this, "_source" )

           })

           .tooltip({

             tooltipClass: "ui-state-highlight"

           });

         this._on( this.input, {

           autocompleteselect: function( event, ui ) {

             ui.item.option.selected = true;

             this._trigger( "select", event, {

               item: ui.item.option

             });

           },

           autocompletechange: "_removeIfInvalid"

         });

       },

       _createShowAllButton: function() {

         var input = this.input,

           wasOpen = false;

         $( "<a>" )

           .attr( "tabIndex", -1 )

           .attr( "title", "Show All Items" )

           .tooltip()

           .appendTo( this.wrapper )

           .button({

             icons: {

               primary: "ui-icon-triangle-1-s"

             },

             text: false

           })

           .removeClass( "ui-corner-all" )

           .addClass( "custom-combobox-toggle ui-corner-right" )

           .mousedown(function() {

             wasOpen = input.autocomplete( "widget" ).is( ":visible" );

           })

           .click(function() {

             input.focus();

             // Close if already visible

             if ( wasOpen ) {

               return;

             }

             // Pass empty string as value to search for, displaying all results

             input.autocomplete( "search", "" );

           });

       },

       _source: function( request, response ) {

         var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );

         response( this.element.children( "option" ).map(function() {

           var text = $( this ).text();

           if ( this.value && ( !request.term || matcher.test(text) ) )

             return {

               label: text,

               value: text,

               option: this

             };

         }) );

       },

       _removeIfInvalid: function( event, ui ) {

         // Selected an item, nothing to do

         if ( ui.item ) {

           return;

         }

         // Search for a match (case-insensitive)

         var value = this.input.val(),

           valueLowerCase = value.toLowerCase(),

           valid = false;

         this.element.children( "option" ).each(function() {

           if ( $( this ).text().toLowerCase() === valueLowerCase ) {

             this.selected = valid = true;

             return false;

           }

         });

         // Found a match, nothing to do

         if ( valid ) {

           return;

         }

         // Remove invalid value

         this.input

           .val( "" )

           .attr( "title", value + " didn't match any item" )

           .tooltip( "open" );

         this.element.val( "" );

         this._delay(function() {

           this.input.tooltip( "close" ).attr( "title", "" );

         }, 2500 );

         this.input.autocomplete( "instance" ).term = "";

       },

       _destroy: function() {

         this.wrapper.remove();

         this.element.show();

       }

     });

   })( jQuery );

   $(function() {

     $( "#combobox" ).combobox();

     $( "#toggle" ).click(function() {

       $( "#combobox" ).toggle();

     });

   });

   </script>

 </head>

 <body>

 <div class="ui-widget">

   <label>Your preferred programming language: </label>

   <select id="combobox">

     <option value="">Select one...</option>

     <option value="ActionScript">ActionScript</option>

     <option value="AppleScript">AppleScript</option>

     <option value="Asp">Asp</option>

     <option value="BASIC">BASIC</option>

     <option value="C">C</option>

     <option value="C++">C++</option>

     <option value="Clojure">Clojure</option>

     <option value="COBOL">COBOL</option>

     <option value="ColdFusion">ColdFusion</option>

     <option value="Erlang">Erlang</option>

     <option value="Fortran">Fortran</option>

     <option value="Groovy">Groovy</option>

     <option value="Haskell">Haskell</option>

     <option value="Java">Java</option>

     <option value="JavaScript">JavaScript</option>

     <option value="Lisp">Lisp</option>

     <option value="Perl">Perl</option>

     <option value="PHP">PHP</option>

     <option value="Python">Python</option>

     <option value="Ruby">Ruby</option>

     <option value="Scala">Scala</option>

     <option value="Scheme">Scheme</option>

   </select>

 </div>

 <button id="toggle">Show underlying select</button>

 </body>

 </html>

Combobox

上面会有一个熟悉的身影, select optoin .这不是正常的HTML吗,所以这个JS是在网页加载之后进行的操作.这样我们就可以在正常的网页上做修改就可以了.

我使用的是 aspx 页面的 asp:dropdownlist 控件, 其实和 select 控件效果是一样的.

我在后台把数据绑定我的控件后,下拉在前台对下面的控件做操作就可以了:

<asp:DropDownList ID="ddl_accountid" runat="server" Style="border-style: none; margin: 0 auto;">
</asp:DropDownList>

操作步骤 :

1 引用jquery ui 插件库

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css">
这个没啥好说的:到官方网站去下载就行了．引入的时候注意一个顺序就可以了．还有一个就是下载的文件中有个images 文件夹,这个文件夹要和你引用 jquery-ui.css 放在同一个文件夹下,因为CSS里索引图片是在本文件夹下找 /images/XXXXX.png文件的.

http://jqueryui.com/resources/download/jquery-ui-1.11.4.zip

2 按上面的例子把代码考入 aspx或者 html 自己的代码段里,把代码里的 #combobox 改成自己的ID #ddl_accountid.(大约在 160 行)

  $(function() {

    $( "#combobox" ).combobox();

    $( "#toggle" ).click(function() {

      $( "#combobox" ).toggle();

    });

3 几个常用的点

3.1 onchange 事件(大约在 120 行)

      _removeIfInvalid: function( event, ui ) {

        // Selected an item, nothing to do

        if ( ui.item ) {
         这里写自己onchage需要处理的事件;

          return;

        }

3.2 清空事件 (大约在 150 行)

// Remove invalid value

this.input

.val( "" )

.attr( "title", value + " didn't match any item" )

.tooltip( "open" );

this.element.val( "" );

this._delay(function() {

this.input.tooltip( "close" ).attr( "title", "" );

}, 2500 );

this.input.autocomplete( "instance" ).term = "";

清空事件可以写在这里.

},

另一种是 ASP.NET AJAX Control Toolkit http://www.ajaxtoolkit.net/ 这个好像是只支持 webservice