0.引言

1.起因

一开始使用Autocomplete做了一个自动补全的文本框，如上图。后来因业务需要希望能在这个文本框的边上做个下拉列表按钮，一按就展开所有支持自动补全的选项。于是在网上搜索了好久，需找类似的插件，最后却回到了原点

。原来jQuery UI 官网Autocomplete介绍里面就有个叫做Combobox的东西（见下图）。

(Combobox)

因为官网上的Combobox用的是Select+Option，我一开始还犯愁，真正用的时候发现它其实可以完美匹配DropDownList。

2.最终效果

1.代码&分析

1.代码

官网Combobox示例代码

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

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

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

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

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>

  .custom-combobox {

    position: relative;

    display: inline-block;

  }

  .custom-combobox-toggle {

    position: absolute;

    top: 0;

    bottom: 0;

    margin-left: -1px;

    padding: 0;

  }

  .custom-combobox-input {

    margin: 0;

    padding: 5px 10px;

  }

  </style>

  <script>

  (function( $ ) {

    $.widget( "custom.combobox", {

      _create: function() {

        this.wrapper = $( "<span>" )

          .addClass( "custom-combobox" )// 此处设置整体span的class

          .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 ui-widget-content ui-state-default ui-corner-left" )//此处设置input的class

          .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" )// 此处设置下拉列表按钮的class

          .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

            };

        }) );

      },

         // 移除input中补全失败的内容

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

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

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

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

    });

  });

  </script>

</head>

<body>

<div class="ui-widget">

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

  <select id="combobox">

    <option value="">Select one...</option>

    <option value="ActionScript">ActionScript</option>

    <option value="AppleScript">AppleScript</option>

    <option value="Asp">Asp</option>

    <option value="BASIC">BASIC</option>

    <option value="C">C</option>

    <option value="C++">C++</option>

    <option value="Clojure">Clojure</option>

    <option value="COBOL">COBOL</option>

    <option value="ColdFusion">ColdFusion</option>

    <option value="Erlang">Erlang</option>

    <option value="Fortran">Fortran</option>

    <option value="Groovy">Groovy</option>

    <option value="Haskell">Haskell</option>

    <option value="Java">Java</option>

    <option value="JavaScript">JavaScript</option>

    <option value="Lisp">Lisp</option>

    <option value="Perl">Perl</option>

    <option value="PHP">PHP</option>

    <option value="Python">Python</option>

    <option value="Ruby">Ruby</option>

    <option value="Scala">Scala</option>

    <option value="Scheme">Scheme</option>

  </select>

</div>

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

</body>

</html>

配合效果图和前台页面生成的 DOM 节点来分析

1.原来的select被隐藏了

2.外面是个span标签，内部是一个input标签（输入框）和一个a标签（下拉按钮）

它们三的class分别对应为

span	.custom-combobox
input	.custom-combobox-input
a	.custom-combobox-toggle

可以通过它们的类名对它们进行操作和样式修改

3.http://api.jqueryui.com/autocomplete/ 有关Autocomplete插件更多的资料

2.配合DropDownList

只需将select标签换成一个DropDownList即可

<asp:DropDownListID="combobox"runat="server"></asp:DropDownList>

然后在C#中绑定想要自动填充的内容

combobox.AutoPostBack = true;

string sqlstr = "SELECT DISTINCT Config_Type FROM [EMS].[dbo].[EMS_Config]";

using(var dt=SQLLocalEMS.ExecuteQuery(sqlstr, CommandType.Text))

{

    if(dt!=null)

    {

        combobox.DataSource = dt;

        combobox.DataTextField = "Config_Type";

        combobox.DataValueField = "Config_Type";

        combobox.DataBind();

    }

}

2.重复插入 combobox 的bug

1.bug描述

实际使用时发现每一次PostBack都会导致组成 combobox 的各DOM 节点被重复插入到页面底部

如下图

1：初始绑定 combobox时生成的

2、3、4：PostBack页面时重复插入的

4：当前真实使用的

2.临时修复方法

通过在每次插入新的 combobox 前，将之前插入的相关 DOM remove()

_create: function() {

    //修复重复Insert的bug

    $(".ui-helper-hidden-accessible").remove();

    $(".ui-autocomplete").remove();

    this.wrapper = $( "<span>" )

      .addClass( "custom-combobox col-lg-11 padding0" )// 此处设置整体span的class

      .insertAfter( this.element );

    this.element.hide();

    this._createAutocomplete();

    this._createShowAllButton();

  },

来自为知笔记(Wiz)

jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList的更多相关文章

可输入自动匹配Select——jquery ui autocomplete
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
jQuery.ui autoComplete使用
官网 http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...
Node.js配合jQuery UI autocomplete的应用
Node.js擅长的领域为: 不需要很多运算吞吐量要求高进消息轻并且要求快出消息轻并且要求快网上的例子都是socket.io的,我一直在想到底能用在什么地方?根据node.js的优点(擅长领域 ...
jQuery UI Autocomplete是jQuery UI的自动完成组件
支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs" ...
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
转:http://www.cnblogs.com/wiseant/p/4553837.html 最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的 ...
jQuery UI AutoComplete的使用
现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...
Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

随机推荐

自动化测试selenium(四)check，选中复选框，操作一组元素
定位复选框位置打开浏览器,按F12,审查元素接下来,我们要实现选中复选框 List<WebElement> inputs = driver.findElements(By.tagNam ...
[Android] Toast问题深度剖析(二)
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者: QQ音乐技术团队题记 Toast 作为 Android 系统中最常用的类之一,由于其方便的api设计和简洁的交互体验,被我们所广泛采用 ...
msp430系统时钟
转自 http://m.blog.csdn.net/blog/msdumin/38441493# MSP430基础时钟模块包含以下3个时钟输入源. 一.4个时钟振荡源 1.LFXT1CLK: 外部晶 ...
LeetCode - 657. Judge Route Circle
Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...
jQuery smartMenu右键自定义上下文菜单插件
http://www.zhangxinxu.com/wordpress/?p=1667 <%@ page contentType="text/html; charset=UTF-8&q ...
CEF小白人系列2-DEV环境配置-Windows10+SDK+VS2015
以下资料整理来自CEF官方教学.作者做了翻译和整理.并会以一种重事件操作的方式来一点点入门. 3个问题: 在上一篇内容中我们了解了什么是CEF,能干些什么.必要的物理学习环境. 下面我们也是以带着问题 ...
C/C++语言简介之运算符
比较特别的是,比特右移(>>)运算符可以是算术(左端补最高有效位)或是逻辑(左端补 0)位移.例如,将 11100011 右移 3 比特,算术右移后成为 11111100,逻辑右移则为 0 ...
概括一下nodejs
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js是事件驱动,非阻塞I/O的.所以它再处理高并发,I/O密集的场景下性能优势明显,如web. 对比 ...
AES对称加密
import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.Secre ...
搭建多系统yum服务器
一.多系统服务器搭建 1.首先挂载光盘 2.安装vsftp 3.使用rpm -ql vsftpd查看vsftpd安装时都产生了哪些文件,找到以.server结尾的文件路径.此文件的文件名就是vsftp ...

jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList