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

随机推荐

BZOJ 2882: 工艺 [后缀自动机+map]
Description 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到把这个工 ...
2018/1/9 redis学习笔记(一)
本文不涉及redis基本命令以及javaapi的解释操作; 首先介绍下redis,一个nosql非关系型数据库,运行在缓存中,特点就是可存储的数据结构类型很多,做为KEY-VALUE数据库,它的键只能 ...
从一个实例学习----FLASK-WTF
本案例通过实现一个注册页面的编写,来带你了解FLASK-WTF的运用. 主要功能为表单基础的功能--手机号码必须为11位数,且通过数据库查找不能有已经注册的了,密码要求输入两遍且必须一样,且所有内容不 ...
Spring基础篇——通过Java注解和XML配置装配bean
自动化装配的确有很大的便利性,但是却并不能适用在所有的应用场景,比如需要装配的组件类不是由自己的应用程序维护,而是引用了第三方的类库,这个时候自动装配便无法实现,Spring对此也提供了相应的解决方案 ...
Linux系统软件安装的几种方式
Linux系统,一个文件能不能执行看的是有没有可执行权限x,不过真正的可执行文件是二进制文件(binary file),举例来说Linux上的c语言源码编写完后,通过gcc程序编译后就可以创建一个可执 ...
c的文件流读取
strtok(数组,分隔符); atof(数组)返回值为转换后的数字; fgets(数组指针,长度,文件句柄); 整整花了两天啊
DxPackNet 4.保存音视频为本地avi文件
捕获到了音视频后要保存到本地文件,这是很常见的应用场景,DxPackNet保存视频文件也比较简单用 IAviStreamWriter avi文件写入流即可 1.初始化相关设备,设定好数据捕获的回调 ...
C++ stl 怎么打印内存内容？
#include <iostream> #include <string> #include <sstream> #include <iomanip> ...
UVA - 1220 Party at Hali-Bula 树的最大独立集
题意: 给定n个人,存在上下级关系,每个人只有一个上级,求最大独立集.并判断最大独立集是否唯一思路:d[i][0]表示以i为根的子树中,不选择第i个节点的最大独立集,f[i][0]表示以i为根的子 ...
Spring data mongodb @CreatedBy@LastModifiedBy@CreatedBy@LastModifiedBy SpringSecurityAuditorAware,只记录用户名
要在Spring data mongodb 中使用@CreatedBy@LastModifiedBy@CreatedBy@LastModifiedBy 这四个注解必须实现 SpringSecuri ...

jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList