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

随机推荐

2018/1/28 RocketMq学习笔记
RocketMq是支持Topic模式的MQ中间件,它的传输格式为topic(主题,一个product对应一个主题,),Tag(标签,其实就是副标题,是为了更好的支持集群模式而出现的,这样客户端可以指定 ...
[LeetCode] 679. 24 Game（回溯法）
传送门 Description You have 4 cards each containing a number from 1 to 9. You need to judge whether the ...
如何解决JavaScript中0.1+0.2不等于0.3
console.log(0.1+0.2===0.3)// true or false?? 在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!= ...
web攻击
一.XSS(跨站脚本攻击) 最常见和基本的攻击WEB网站的方法.攻击者在网页上发布包含攻击性代码的数据.当浏览者看到此网页时,特定的脚本就会以浏览者用户的身份和权限来执行.通过XSS可以比较容易地修改 ...
MAC下secretCRT使用技巧(转)
1.打开secureCRT,按alt+b,可以调出快速启动栏,我相信secureCRT的忠实用户,都会保存一堆的sessions.2.按ctrl,可以同时选中多个session,再点击连接,可快速连接 ...
httping：测量网站延迟
遇到网络问题的时候,我们一般会先通过 ping 这个工具来了解基本的情况.httping 与 ping 类似,不过它不是发送 ICMP 请求,而是发送 HTTP 请求.利用 httping,我们可以测 ...
ps删除或覆盖内容
除了选区删除.复制选区内容覆盖之外另外一种方法. 删掉字母"PS": 1. 矩形框选工具在字母上方画出选区 2. Ctrl+T,并拖拽底部以覆盖字母 3. 完成
原生Java代码拷贝目录
拷贝.移动文件(夹),有三方包commons-io可以用,但是有时候有自己的需求,只能使用原生java代码,这时可以用以下几种方式进行拷贝: 1.使用系统命令(Linux)调用此种方式对操作系统有要 ...
使用lambda编程之延迟执行
使用lambda表达式的主要原因是,将代码的执行延迟到一个合适的时间点. 所有的lambda表达式都是延迟执行的.毕竟,如果你希望立即执行一段代码,那就没有必要使用lambda表达式了.延迟执行代码的 ...
css线性渐变兼容
css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList