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 ...

随机推荐

配置 github 上的程序
最近学习的node.vue的单页模式,看到github (地址:https://github.com/bailicangdu/node-elm)上面有大神做了一个几十页的系统,心想怎么弄到本地研究下 ...
基于Java的WebSocket推送
WebSocket的主动推送关于消息推送,现在的解决方案如轮询.长连接或者短连接,当然还有其他的一些技术框架,有的是客户端直接去服务端拿数据. 其实推送推送主要讲的是一个推的概念,WebSocket ...
golang GET 出现 x509: certificate signed by unknown authority
我们编写一个Go程序来尝试与这个HTTPS server建立连接并通信. //gohttps/4-https/client1.gopackage main import ( "fmt& ...
ps通道抠章
1. 打开图片 2. 使用椭圆形选框工具,选择章所在范围(ALT+SHITF+鼠标左键) 3.复制图层(CTRL+J)为图层1,隐藏背景 4.进入通道,选择对比度最大的通道,复制通道副本 5.反选(C ...
Java经典编程题50道之四十四
求0~7所能组成的奇数个数.分析:组成1位数是4个,组成2位数是7*4个,组成3位数是7*8*4个,组成4位数是7*8*8*4个…… public class Example44 { publi ...
Spring中的applicationContext.xml实现自动装配
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
Eclipse 安装 SVN 插件的两种方法
eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里使用eclipse 里Help菜单的“Install New Software”,通过 ...
CodeForces-749A
要求组成n的素数最多,根据n的奇偶讨论:如果n是偶数,直接打印n/2个数字'2'就可以了:如果n是基数,则先打印一个'3',再打印(n-3)/2个数字'2'就可以了. AC代码: #include&l ...
Go基础之--操作Mysql(二)
在上一篇文章中主要整理了Golang连接mysql以及一些基本的操作,并进行了大概介绍,这篇文章对增删查改进行详细的整理读取数据在上一篇文章中整理查询数据的时候,使用了Query的方法查询,其实d ...
List，Set，Map
1.Collection 和 Map 的区别容器内每个为之所存储的元素个数不同.Collection类型者,每个位置只有一个元素.List,SetMap类型者,持有 key-value pair,像 ...

jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList