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

随机推荐

chrome无法登陆账号，显示操作超时的解决方案
起因今天重装了下windows操作系统,准备登陆chrome浏览器,以同步各种插件(你懂的),结果是...无法登陆账号,显示操作超时,真是无语了. 碰到了这个问题第一个直觉是:FQ.突然想到如果修改 ...
JDBC【数据库连接池、DbUtils框架、分页】
1.数据库连接池什么是数据库连接池简单来说:数据库连接池就是提供连接的... 为什么我们要使用数据库连接池数据库的连接的建立和关闭是非常消耗资源的频繁地打开.关闭连接造成系统性能低下编写连接 ...
ubuntu 双网卡建网桥脚本实现
#!/bin/bash interface1=`ls /sys/class/net|grep en|awk 'NR==1{print}'` interface2=`ls /sys/class/net| ...
归并排序Merge Sort
//C语言实现 void mergeSort(int array[],int first, int last) { if (first < last)//拆分数列中元素只剩下两个的时候,不再拆分 ...
DML、DDL、DCL的区别
DML(data manipulation language): 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的语言DDL( ...
CEF小白人系列1-认识CEF
手头上有个项目需要做浏览器的相关功能,评估了几个嵌入式方案最后选定CEF作为开发基础. 在入坑新技术的时候第一选择是去官网学习,这是一个非常好的习惯. CEF官网(请科学上网) https://bit ...
正本清源区块链——Caoz
正本清源区块链说明:以下内容整理自Caoz的<正本清源区块链>,如有不妥,请联系我修改或删除. 简介不讨论炒币!不讨论炒币!不讨论炒币! 本课程内容分为两部分: 第一部分,烧脑篇,介绍 ...
HDU - 1907 John 反Nimm博弈
思路: 注意与Nimm博弈的区别,谁拿完谁输! 先手必胜的条件: 1. 每一个小游戏都只剩一个石子了,且SG = 0. 2. 至少有一堆石子数大于1,且SG不等于0 证明:1. 你和对手都只有一种选 ...
Jmeter简单介绍与搭配Jenkins实现自动化
Jmeter简介 Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web应用测试,但后来扩展到其他测试领域. 它可以用于 ...
filebeat.yml（中文配置详解）
################### Filebeat Configuration Example ######################### ####################### ...

jQuery UI Autocomplete Combobox 配 ASP.NET DropDownList