<!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. WPF SDK研究 之 AppModel

    Jianqiang's Mobile Dev Blog iOS.Android.WP CnBlogs Home New Post Contact Admin Rss Posts - 528 Artic ...

  2. centos一键优化脚本

    centos一键优化脚本:细节:http://oldboy.blog.51cto.com/2561410/1336488网络状态优化:http://oldboy.blog.51cto.com/2561 ...

  3. C语言 文件操作9--fgetc()和fputc()

    //fgetc()和fputc() #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> # ...

  4. LinkedList方法总结 ListIterator和Iterator的区别

    LinkedList也像ArrayList一样实现了基本的接口,但是它执行某些从操作时比ArrayList更高效,但在随机访问方面要逊色一些.LinkedList中有一些方法虽然名字不同,但可以完成相 ...

  5. Windows下虚拟机安装Mac OS X ----- VM12安装Mac OS X 10.11

    Windows下虚拟机安装Mac OS X -– VM12安装Mac OS X 10.11 随着Iphone在国内大行其道,越来越多的开发者涌入iOS开发大军 中,但都苦于没有苹果机,本文即将介绍WI ...

  6. css优化篇

    平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿. 首先,CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都 ...

  7. 自定义带图片和文字的ImageTextButton

    今天我们来讲一下有关自定义控件的问题,今天讲的这篇是从布局自定义开始的,难度不大,一看就明白,估计有的同学或者开发者看了说,这种方式多此一举,但是小编我不这么认为,多一种解决方式,就多一种举一反三的学 ...

  8. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  9. 《TCP/IP详解卷1：协议》第19章 TCP的交互数据流-读书笔记

    章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...

  10. 编写高质量代码改善C#程序的157个建议[勿选List<T>做基类、迭代器是只读的、慎用集合可写属性]

    前言 本文已更新至http://www.cnblogs.com/aehyok/p/3624579.html .本文主要学习记录以下内容: 建议23.避免将List<T>作为自定义集合类的基 ...