autocomplete 自动填充 combobox

autocomplete

autocomplete有两种

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

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

先看一下原代码:

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="utf-8">
  5   <title>jQuery UI Autocomplete - Combobox</title>
  6   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9   <link rel="stylesheet" href="/resources/demos/style.css">
 10   <style>
 11   .custom-combobox {
 12     position: relative;
 13     display: inline-block;
 14   }
 15   .custom-combobox-toggle {
 16     position: absolute;
 17     top: 0;
 18     bottom: 0;
 19     margin-left: -1px;
 20     padding: 0;
 21   }
 22   .custom-combobox-input {
 23     margin: 0;
 24     padding: 5px 10px;
 25   }
 26   </style>
 27   <script>
 28   (function( $ ) {
 29     $.widget( "custom.combobox", {
 30       _create: function() {
 31         this.wrapper = $( "<span>" )
 32           .addClass( "custom-combobox" )
 33           .insertAfter( this.element );
 34  
 35         this.element.hide();
 36         this._createAutocomplete();
 37         this._createShowAllButton();
 38       },
 39  
 40       _createAutocomplete: function() {
 41         var selected = this.element.children( ":selected" ),
 42           value = selected.val() ? selected.text() : "";
 43  
 44         this.input = $( "<input>" )
 45           .appendTo( this.wrapper )
 46           .val( value )
 47           .attr( "title", "" )
 48           .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
 49           .autocomplete({
 50             delay: 0,
 51             minLength: 0,
 52             source: $.proxy( this, "_source" )
 53           })
 54           .tooltip({
 55             tooltipClass: "ui-state-highlight"
 56           });
 57  
 58         this._on( this.input, {
 59           autocompleteselect: function( event, ui ) {
 60             ui.item.option.selected = true;
 61             this._trigger( "select", event, {
 62               item: ui.item.option
 63             });
 64           },
 65  
 66           autocompletechange: "_removeIfInvalid"
 67         });
 68       },
 69  
 70       _createShowAllButton: function() {
 71         var input = this.input,
 72           wasOpen = false;
 73  
 74         $( "<a>" )
 75           .attr( "tabIndex", -1 )
 76           .attr( "title", "Show All Items" )
 77           .tooltip()
 78           .appendTo( this.wrapper )
 79           .button({
 80             icons: {
 81               primary: "ui-icon-triangle-1-s"
 82             },
 83             text: false
 84           })
 85           .removeClass( "ui-corner-all" )
 86           .addClass( "custom-combobox-toggle ui-corner-right" )
 87           .mousedown(function() {
 88             wasOpen = input.autocomplete( "widget" ).is( ":visible" );
 89           })
 90           .click(function() {
 91             input.focus();
 92  
 93             // Close if already visible
 94             if ( wasOpen ) {
 95               return;
 96             }
 97  
 98             // Pass empty string as value to search for, displaying all results
 99             input.autocomplete( "search", "" );
100           });
101       },
102  
103       _source: function( request, response ) {
104         var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
105         response( this.element.children( "option" ).map(function() {
106           var text = $( this ).text();
107           if ( this.value && ( !request.term || matcher.test(text) ) )
108             return {
109               label: text,
110               value: text,
111               option: this
112             };
113         }) );
114       },
115  
116       _removeIfInvalid: function( event, ui ) {
117  
118         // Selected an item, nothing to do
119         if ( ui.item ) {
120           return;
121         }
122  
123         // Search for a match (case-insensitive)
124         var value = this.input.val(),
125           valueLowerCase = value.toLowerCase(),
126           valid = false;
127         this.element.children( "option" ).each(function() {
128           if ( $( this ).text().toLowerCase() === valueLowerCase ) {
129             this.selected = valid = true;
130             return false;
131           }
132         });
133  
134         // Found a match, nothing to do
135         if ( valid ) {
136           return;
137         }
138  
139         // Remove invalid value
140         this.input
141           .val( "" )
142           .attr( "title", value + " didn't match any item" )
143           .tooltip( "open" );
144         this.element.val( "" );
145         this._delay(function() {
146           this.input.tooltip( "close" ).attr( "title", "" );
147         }, 2500 );
148         this.input.autocomplete( "instance" ).term = "";
149       },
150  
151       _destroy: function() {
152         this.wrapper.remove();
153         this.element.show();
154       }
155     });
156   })( jQuery );
157  
158   $(function() {
159     $( "#combobox" ).combobox();
160     $( "#toggle" ).click(function() {
161       $( "#combobox" ).toggle();
162     });
163   });
164   </script>
165 </head>
166 <body>
167  
168 <div class="ui-widget">
169   <label>Your preferred programming language: </label>
170   <select id="combobox">
171     <option value="">Select one...</option>
172     <option value="ActionScript">ActionScript</option>
173     <option value="AppleScript">AppleScript</option>
174     <option value="Asp">Asp</option>
175     <option value="BASIC">BASIC</option>
176     <option value="C">C</option>
177     <option value="C++">C++</option>
178     <option value="Clojure">Clojure</option>
179     <option value="COBOL">COBOL</option>
180     <option value="ColdFusion">ColdFusion</option>
181     <option value="Erlang">Erlang</option>
182     <option value="Fortran">Fortran</option>
183     <option value="Groovy">Groovy</option>
184     <option value="Haskell">Haskell</option>
185     <option value="Java">Java</option>
186     <option value="JavaScript">JavaScript</option>
187     <option value="Lisp">Lisp</option>
188     <option value="Perl">Perl</option>
189     <option value="PHP">PHP</option>
190     <option value="Python">Python</option>
191     <option value="Ruby">Ruby</option>
192     <option value="Scala">Scala</option>
193     <option value="Scheme">Scheme</option>
194   </select>
195 </div>
196 <button id="toggle">Show underlying select</button>
197  
198  
199 </body>
200 </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 = "";

清空事件可以写在这里.

},