<!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. JqueryMobile入门基础附源码下载

    最近要做一个手机版的网站,所以就了解了一点JqueryMObile,下面是我整理的笔记,现在分享给大家,希望朋友们喜欢,先给个首页看看吧!!! 一.JqueryMobile基本页面结构 <!DO ...

  2. C#基础——谈谈.NET异步编程的演变史

    http://www.cnblogs.com/fzrain/p/3545810.html 前言 C#5.0最重要的改进,就是提供了更强大的异步编程.C#5.0仅增加两个新的关键字:async和awai ...

  3. [CareerCup] 12.2 Find the Reason of Crash 找到程序崩溃的原因

    12.2 You are given the source to an application which crashes when it is run. After running it ten t ...

  4. 浅入DNS

    1.DNS是怎么工作的 首先我们可以很简单的理解DNS协议,它就是一个将域名与ip地址进行双向转换的协议,而消息类型只有查询和回应2种类型.那客户端查询域名,是要请求谁呢?答案是域名服务器,现在域名服 ...

  5. 图片ping、JSONP和CORS跨域

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<由外边距合并到BFC> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时会话 ...

  6. 使用OneNote的COM组件，实现OCR功能。

    背景 在业务系统开发的过程中,很多情况下会去识别图片中的相关信息,并且把信息录入到系统中.现在希望通过自动化的方式录入,就有了以下的工作.在对比了几个OCR软件在中文识别方面的准确率后,决定使用微软的 ...

  7. So... what's up?

    So... testing markdown editor what to learn in May? html5 canvas api codeigniter framework var test ...

  8. 使用spring cloud实现分布式配置管理

    <7天学会spring cloud系列>之创建配置管理服务器及实现分布式配置管理应用. 本文涉及到的项目: 开源项目:http://git.oschina.net/zhou666/spri ...

  9. 端口扫描之王——nmap入门精讲（一）

    端口扫描在百度百科上的定义是: 端口扫描是指某些别有用心的人发送一组端口扫描消息,试图以此侵入某台计算机,并了解其提供的计算机网络服务类型(这些网络服务均与端口号相关),但是端口扫描不但可以为黑客所利 ...

  10. Unity3D独立游戏开发日记（二）：摆放建筑物

    在沙盒游戏里,能自由建造是很重要的特点,比如说风靡全球的<我的世界>,用一个个方块就能搭建出规模宏大的世界.甚至有偏激的人说,没有自由建造,就不是一个真正的沙盒游戏.的确,沙盒游戏的魅力有 ...