可输入的 Combox(DropDownList)

aspx页面中需要可以输入的combox，在网上找了一个js的插件，效果图如下：

aaarticlea/png;base64,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" alt="" />

前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputComBox.aspx.cs" Inherits="School.Web.TestDemo.InputComBox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>可输入的combox</title>
    <link type="text/css" href="/Scripts/jquery-1.10.4/jquery-ui.min.css" rel="stylesheet" />
    <script type="text/javascript" src="/Scripts/jquery-1.10.4/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-1.10.4/jquery-ui.min.js"></script>
    <style type="text/css">
        .appcusser li a {
            width: 32px;
            background: url(/Images/pro_down.gif);
            float: left;
            display: block;
            height: 33px;
            line-height: 30px;
            text-align: center;
            color: #2b7fbf;
            font-weight: bold;
            margin-right: 5px;
        }

        .appcusser li span {
            display: block;
            float: left;
            width: 100px;
            text-align: right;
            padding-right: 5px;
            color: #666;
        }
        .appcusser li label {
            display: block;
            float: left;
            line-height: 28px;
            margin-right: 5px;
        }

        ul, li {
            list-style: none;
        }

        .custom-combobox {
            position: relative;
            display: inline-block;
        }

        .custom-combobox-toggle {
            position: absolute;
            top: 5px;
            bottom: 0;
            left: 160px;
            top: 0;
            padding: 0;
            height: 32px;
            /* 支持： IE7 */
            *height: 1.7em;
            *top: 0.1em;
        }

        .custom-combobox-input {
            margin: 0;
            padding: 0.3em;
            background-color: #fff;
            background-image: none;
            color: #333;
            height: 22px;
            width: 150px;
        }

        .hideA {
            background: #f3f3f3;
        }

        .clear {
            clear: both;
            height: 0;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        (function ($) {
            $.widget("custom.combobox", {
                _create: function () {
                    this.wrapper = $("<span>")
                      .addClass("custom-combobox")
                      .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("id", "btnShowPro")
                      .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                        .addClass(" validate[required,maxSize[200]]")
                      .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", "aShow")
                      .attr("id", "aShow")
                      //.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")
                      .mousedown(function () {
                          wasOpen = input.autocomplete("widget").is(":visible");
                      })
                      .click(function () {
                          input.focus();

                          // 如果已经可见则关闭
                          if (wasOpen) {
                              return;
                          }

                          // 传递空字符串作为搜索的值，显示所有的结果
                          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
                            };
                    }));
                },

                _removeIfInvalid: function (event, ui) {

                    // 选择一项，不执行其他动作
                    if (ui.item) {
                        return;
                    }

                    // 搜索一个匹配（不区分大小写）
                    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;
                        }
                    });

                    // 找到一个匹配，不执行其他动作
                    if (valid) {
                        return;
                    }

                    // 移除无效的值
                    //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.data("ui-autocomplete").term = "";
                },

                _destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })(jQuery);

        $(function () {
            $("#<%=ddlName.ClientID%>").combobox();
            $("#toggle").click(function () {
                $("#<%=ddlName.ClientID%>").toggle();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ul class="appcusser">
                <li>
                    <span><asp:TextBox ID="txtID" runat="server" Width="80"></asp:TextBox></span>
                    <label><asp:DropDownList ID="ddlName" runat="server" CssClass="app_txt2 fl"></asp:DropDownList></label>
                    <div class="clear"></div>
                </li>
                <li>
                    <asp:Button ID="btnSeach" Text="查询" runat="server" />
                </li>
            </ul>
        </div>
    </form>
</body>
</html>

后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace School.Web.TestDemo
{
    public partial class InputComBox : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string tID = txtID.Text.Trim();
            //if (!IsPostBack)
            //{
                if (string.IsNullOrEmpty(tID))
                {
                    BindDrop();
                    ddlName.Items.Insert(0, new ListItem(" ", ""));
                }
                else
                {
                    BindDrop();
                    int id = 0;
                    int.TryParse(tID, out id);
                    Bind(id);
                }
            //}
        }

        public void Bind(int id)
        {
            Student student = InitData().SingleOrDefault(s => s.ID == id);
            if (student != null)
            {
                if (ddlName.Items.Contains(new ListItem(student.userName))) //判断ddlName下拉列表中是否存在该值，存在则赋值，不存在则插入ddlName下拉列表中
                {
                    ddlName.SelectedValue = student.userName;
                }
                else
                {
                    ddlName.Items.Insert(0, new ListItem(txtID.Text.Trim()));
                }
            }
            else
            {
                ddlName.Items.Insert(0, new ListItem(txtID.Text.Trim()));
            }
        }

        public void BindDrop()
        {
            ddlName.DataSource = InitData();
            ddlName.DataTextField = "userName"; //ddlName中DataTextField和DataValueField设置为同一个值，在查询是否存在该值是才可以；或者new ListItem("text", "value")设置text、value值不一样
            ddlName.DataValueField = "userName";
            ddlName.DataBind();
        }

        public List<Student> InitData()
        {
            List<Student> listStudent = new List<Student>();
            for (int i = 1; i < 11; i++)
            {
                Student student = new Student();

                student.ID = i;
                student.userName = "学生" + i;
                student.passWord = "123456";
                student.Age = i + 20;
                student.Address = "北京市顺义区天竺镇" + i + "区";
                listStudent.Add(student);
            }
            return listStudent;
        }
    }

    public class Student
    {
        public int ID { get; set; }
        public string userName { get; set; }

        public string passWord { get; set; }

        public int Age { get; set; }

        public string Address { get; set; }
    }
}