<!doctype html>

 <html lang="en">

 <head>

   <meta charset="utf-8">

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

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

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

   <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

   <style>

   .custom-combobox {

     position: relative;

     display: inline-block;

   }

   .custom-combobox-toggle {

     position: absolute;

     top: 0;

     bottom: 0;

     margin-left: -1px;

     padding: 0;

     width:23px;

   }

   .custom-combobox-input {

     margin: 0;

     padding: 3px 0px;

   }

   </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-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() {

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

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

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

     });

   });

   </script>

 </head>

 <body>

 <center>

 <div >

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

     <select id="sub_tea_id_select">

         <option value="00001">00001 李建欣</option>

         <option value="00002">00002 沃天宇</option>

         <option value="00003">00003 刘旭东</option>

         <option value="11001">11001 李未</option>

         <option value="11002">11002 怀进鹏</option>

         <option value="11003">11003 呂卫锋</option>

         <option value="11061032">11061032 魏佳丽</option>

     </select>

 </div>

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

 </center>

 </body>

 </html>

可输入自动匹配Select——jquery ui autocomplete的更多相关文章

  1. jQuery UI Autocomplete是jQuery UI的自动完成组件

    支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...

  2. jQuery UI Autocomplete是jQuery UI的自动完成组件（share）

    官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...

  3. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  4. jQuery UI AutoComplete的使用

    现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...

  5. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  6. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

  7. JQuery UI Autocomplete与jquery.autocomplete.js

    程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...

  8. jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList

    0.引言   1.起因                  一开始使用Autocomplete做了一个自动补全的文本框,如上图.后来因业务需要希望能在这个文本框的边上做个下拉列表按钮,一按就展开所有支持 ...

  9. jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框

    $("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...

随机推荐

  1. 如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏

    kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏.那么我们应该如何 ...

  2. HashMap 中的 entrySet()使用方法 2016.12.28

    package map; import java.util.HashMap; import java.util.Iterator; import java.util.Map.Entry; import ...

  3. memcached工作原理与优化建议

    申明,本文为转载文:http://my.oschina.net/liuxd/blog/63129 工作原理 基本概念:slab,page,chunk. slab,是一个逻辑概念.它是在启动memcac ...

  4. Quartz.net打造信息抽取器

    由于最近的一个项目需要定时抽取特定XML信息,然后保存到数据库,最后通过WebApi把手机端要使用的方法给暴露出来,所以去研究了一下Quartz.net.由于项目很小,我没用到Autofac,Repo ...

  5. Android 获取手机Mac地址，手机名称

    /** * 获取手机mac地址<br/> * 错误返回12个0 */ public static String getMacAddress(Context context) { // 获取 ...

  6. Uedit的快捷键

    Key1 自动换行_CTRL + W     这个已经不是什么新奇的功能了,就连你们最不喜欢的notepad都有了这个功能.说来也奇怪,编辑器为什么都带有这个功能呢?谁愿意自己的编辑器带有水平滚动条啊 ...

  7. Gradle tip #1: tasks

    With this post I would like to start series of Gradle-related topics I wish I knew when I first star ...

  8. Sublime Text 之运行 ES6 (基于babel)

    本文同步自我的个人博客:http://www.52cik.com/2015/10/21/sublime-text-run-es6.html 之前在博客园里写过一篇<Sublime Text 之运 ...

  9. java heep space错误解决办法

    1.双击tomcat 2.Open launch configuration 3.Argument 4. VM arguments中添加:-Xmx1024M -Xms512M -XX:MaxPermS ...

  10. Android调用系统相册和拍照的Demo

    最近我在群里看到有好几个人在交流说现在网上的一些Android调用系统相册和拍照的demo都有bug,有问题,没有一个完整的.确实是,我记得一个月前,我一同学也遇到了这样的问题,在低版本的系统中没问题 ...