可输入自动匹配Select——jquery ui autocomplete

左手的ㄟ右手 2021-12-13 05:06 285阅读 0赞

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 results
    100             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: this
    113             };
    114         }) );
    115       },
    116  
    117       _removeIfInvalid: function( event, ui ) {
    118  
    119         // Selected an item, nothing to do
    120         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 do
    136         if ( valid ) {
    137           return;
    138         }
    139  
    140         // Remove invalid value
    141         this.input
    142           .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>

转载于:https://www.cnblogs.com/z-sm/p/3989404.html