首页 > 代码库 > 可输入自动匹配Select——jquery ui autocomplete
可输入自动匹配Select——jquery ui autocomplete
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="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 7 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 8 <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 9 <style> 10 .custom-combobox { 11 position: relative; 12 display: inline-block; 13 14 } 15 .custom-combobox-toggle { 16 position: absolute; 17 top: 0; 18 bottom: 0; 19 margin-left: -1px; 20 padding: 0; 21 width:23px; 22 } 23 .custom-combobox-input { 24 margin: 0; 25 padding: 3px 0px; 26 } 27 </style> 28 <script> 29 (function( $ ) { 30 $.widget( "custom.combobox", { 31 _create: function() { 32 this.wrapper = $( "<span>" ) 33 .addClass( "custom-combobox" ) 34 .insertAfter( this.element ); 35 36 this.element.hide(); 37 this._createAutocomplete(); 38 this._createShowAllButton(); 39 }, 40 41 _createAutocomplete: function() { 42 var selected = this.element.children( ":selected" ), 43 value = selected.val() ? selected.text() : ""; 44 45 this.input = $( "<input>" ) 46 .appendTo( this.wrapper ) 47 .val( value ) 48 .attr( "title", "" ) 49 .addClass( "custom-combobox-input ui-widget-content ui-state-default ui-corner-left" ) 50 .autocomplete({ 51 delay: 0, 52 minLength: 0, 53 source: $.proxy( this, "_source" ) 54 }) 55 .tooltip({ 56 tooltipClass: "ui-state-highlight" 57 }); 58 59 this._on( this.input, { 60 autocompleteselect: function( event, ui ) { 61 ui.item.option.selected = true; 62 this._trigger( "select", event, { 63 item: ui.item.option 64 }); 65 }, 66 67 autocompletechange: "_removeIfInvalid" 68 }); 69 }, 70 71 _createShowAllButton: function() { 72 var input = this.input, 73 wasOpen = false; 74 75 $( "<a>" ) 76 .attr( "tabIndex", -1 ) 77 .attr( "title", "Show All Items" ) 78 .tooltip() 79 .appendTo( this.wrapper ) 80 .button({ 81 icons: { 82 primary: "ui-icon-triangle-1-s" 83 }, 84 text: false 85 }) 86 .removeClass( "ui-corner-all" ) 87 .addClass( "custom-combobox-toggle ui-corner-right" ) 88 .mousedown(function() { 89 wasOpen = input.autocomplete( "widget" ).is( ":visible" ); 90 }) 91 .click(function() { 92 input.focus(); 93 94 // Close if already visible 95 if ( wasOpen ) { 96 return; 97 } 98 99 // Pass empty string as value to search for, displaying all results100 input.autocomplete( "search", "" );101 });102 },103 104 _source: function( request, response ) {105 var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );106 response( this.element.children( "option" ).map(function() {107 var text = $( this ).text();108 if ( this.value && ( !request.term || matcher.test(text) ) )109 return {110 label: text,111 value: text,112 option: this113 };114 }) );115 },116 117 _removeIfInvalid: function( event, ui ) {118 119 // Selected an item, nothing to do120 if ( ui.item ) {121 return;122 }123 124 // Search for a match (case-insensitive)125 var value = this.input.val(),126 valueLowerCase = value.toLowerCase(),127 valid = false;128 this.element.children( "option" ).each(function() {129 if ( $( this ).text().toLowerCase() === valueLowerCase ) {130 this.selected = valid = true;131 return false;132 }133 });134 135 // Found a match, nothing to do136 if ( valid ) {137 return;138 }139 140 // Remove invalid value141 this.input142 .val( "" )143 .attr( "title", value + " didn‘t match any item" )144 .tooltip( "open" );145 this.element.val( "" );146 this._delay(function() {147 this.input.tooltip( "close" ).attr( "title", "" );148 }, 2500 );149 this.input.autocomplete( "instance" ).term = "";150 },151 152 _destroy: function() {153 this.wrapper.remove();154 this.element.show();155 }156 });157 })( jQuery );158 159 $(function() {160 $( "#sub_tea_id_select" ).combobox();161 $( "#toggle" ).click(function() {162 $( "#sub_tea_id_select" ).toggle();163 });164 });165 </script>166 </head>167 <body>168 <center>169 <div >170 <label>Your preferred programming language: </label>171 <select id="sub_tea_id_select">172 <option value="00001">00001 李建欣</option>173 <option value="00002">00002 沃天宇</option>174 <option value="00003">00003 刘旭东</option>175 <option value="11001">11001 李未</option>176 <option value="11002">11002 怀进鹏</option>177 <option value="11003">11003 呂卫锋</option>178 <option value="11061032">11061032 魏佳丽</option>179 </select>180 </div>181 <button id="toggle">Show underlying select</button>182 </center>183 184 185 </body>186 </html>
可输入自动匹配Select——jquery ui autocomplete
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。