<!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. [tools]camtasia studio8.6

    实际情况: 装了汉化补丁包后坏事,最后还是没装汉化补丁包.直接用英文版的.安装过程中输入序列号即可激活. ):输入注册码安装 用户名:大眼仔~旭(Anan) 注册码:GCABC-CPCCE-BPMMB ...

  2. Java compiler level does not match the version of the installed Java project facet.(转)

    Java compiler level does not match解决方法 从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclipse报Description  Resource P ...

  3. oracle.jbo.JboException: JBO-29000: JBO-29000: Bad version number in .class file

    我在本地run Page的时候报以下错误. oracle.jbo.JboException: JBO-29000: JBO-29000: Bad version number in .class fi ...

  4. 缓存算法之belady现象

    前言 在使用FIFO算法作为缺页置换算法时,分配的缺页增多,但缺页率反而提高,这样的异常现象称为belady Anomaly. 虽然这种现象说明的场景是缺页置换,但在运用FIFO算法作为缓存算法时,同 ...

  5. 解决方法:未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序

    win7或win8 64位调试程序,出现这样的错误提示:未在本地计算机上注册 Microsoft.Jet.OLEDB.4.0 提供程序 解决方法如下: 方法一:“设置应用程序池默认属性”/“常规”/” ...

  6. 风清杨之Oracle的安装与说明

    1.Oracle官网与下载地址 Oracle中文官网:http://www.oracle.com/cn/index.html Oracle中文官网下载:http://www.oracle.com/te ...

  7. 翻译-微服务API Gateway

    原文地址:http://microservices.io/patterns/apigateway.html,以下是使用google翻译对原文的翻译. 让我们想象一下你正在建立一个使用微服务模式的网上商 ...

  8. loadsh这个神奇的js工具类库

    var _ = require('lodash'); 把几个对象合并为一个对象. _.assign({ 'a': 1 }, { 'b': 2 }, { 'c': 3 });// ➜ { 'a': 1, ...

  9. 23.C#Queryable的扩展方法(十二章12.1-12.2)

    今天要写的知识还真心有点绕呢,对于第一节的内容,其实是把原先在内存中的数据源,换成了从数据库中提取出来的数据.从代码的使用方式上是一样的,直接跳过,来看看IEnumerable和IQueryable的 ...

  10. 第十章：Javascript子集和扩展

    本章讨论javascript的集和超集,其中子集的定义大部分处于安全考虑.只有使用这门语言的一个安全的子集编写脚本,才能让代码执行的更安全.更稳定.ECMScript3标准是1999年版本的,10年后 ...