<!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. Windows Phone：如何检查WMAppManifest中的Capability属性

    在Windows Phone应用中有一个应用程序清单(WMAppManifest.xml),其中对于不同的应用可以设定Capability来告知需要哪些特性或功能,详细内容可以参考官方文档: http ...

  2. IOS开发之—— 客服QQ（调用qq网页聊天），客服热线（拨打电话）

    @property (nonatomic,strong) UIButton *but;@property (nonatomic,strong) UIButton *but1;@property (st ...

  3. HTML5 文件异步上传 — h5uploader.js

    原文地址:http://imziv.com/blog/article/read.htm?id=62 之前写过一篇H5异步文件上传的文章, 但是很多朋友看着我的这个教程还是出现很多问题,文章写的不是很好 ...

  4. 嵌入式linux驱动开发之点亮led（驱动编程思想之初体验）

    这节我们就开始开始进行实战啦!这里顺便说一下啊,出来做开发的基础很重要啊,基础不好,迟早是要恶补的.个人深刻觉得像这种嵌入式的开发对C语言和微机接口与原理是非常依赖的,必须要有深厚的基础才能hold的 ...

  5. spring cloud教程之使用spring boot创建一个应用

    <7天学会spring cloud>第一天,熟悉spring boot,并使用spring boot创建一个应用. Spring Boot是Spring团队推出的新框架,它所使用的核心技术 ...

  6. Github上Python开发者应该关心的Repo

    carbaugh/lice lice : Generate license files for your projects 一个用来为你的项目生成许可证的工具.这下可方便了,不用手工的去修改了! co ...

  7. 【niubi-job——一个分布式的任务调度框架】----安装教程

    niubi-job是什么 niubi-job是LZ耗时三个星期,费尽心血打造的一个具备高可靠性以及水平扩展能力的分布式任务调度框架,采用quartz作为底层的任务调度管理器,zookeeper做集群的 ...

  8. Bootstrap系列 -- 28. 下拉菜单状态

    下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...

  9. Daily English

  10. [vijos1892]树上的最大匹配（树形DP）

    题目:https://vijos.org/p/1892 分析:(100分其实用到各种c++优化,没什么实际意义,所以弄70就可以了) 题目很简单,很容易想出用树形DP,但是求方案数的时候,满满都是细节 ...