dropdownlist textbox 结合，下拉框和文本框结合的控件

实际上这样的控件有点不伦不类了，如果没有强烈的需求还是不要用的为好。

借用AjaxControlToolkit的ComboBox实现即可选择又可输入的，同时具有下拉框和文本框功能的控件。

实现中仍有不足，需要大家自己根据自己需求改进。

 

页面代码

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CustomCombo.ascx.vb" Inherits="UketukeWeb.CustomCombo" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<div>
    <asp:ComboBox ID="ComboBox1" runat ="server" Width="100px" Height="15px" CssClass="combobox" ClientIDMode="AutoID"
        AutoCompleteMode ="SuggestAppend"
        AutoPostBack="false"
        DropDownStyle="DropDownList"
        CaseSensitive="False"
        >
    </asp:ComboBox>
    <asp:HiddenField ID="ItemCount" runat="server" Value="0" ClientIDMode="AutoID"/>   
    <asp:HiddenField ID="ComboHiddenText" runat="server" Value="" ClientIDMode="AutoID"/>   
    <asp:HiddenField id="ComboHiddenValue" runat="server" Value="" ClientIDMode="AutoID"/>   
</div>

 

脚本代码

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var combobox = $('#<%=ComboBox1.ClientID %>');
        var indexHidden = $('#<%=ComboBox1.ClientID %>_HiddenField');
        var tag = $("#<%=Me.ID %>");
        $('#<%=ComboBox1.ClientID %> button').attr("tabindex", "-1");
        //$('#<%=ComboBox1.ClientID %> table').css("position", "static");
        $('#<%=ComboBox1.ClientID %> table').css("top", "1px");
        combobox.find("input:text").addClass(" text");
        //$('#<%=ComboBox1.ClientID %> ul').click(function () {
        //    $(this).hide();
        //});

        if ("<%=Me.ImeMode %>") {
            combobox.find("input:text").addClass(" ime<%=Me.ImeMode %>");
        } else {
            combobox.find("input:text").addClass(" imeOff");
        }

        if (eval("<%=Me.Items.Count = 0  %>".toLocaleLowerCase())) {
            combobox.find("input:text").val("");
        }

        if ("<%=Me.MustInput %>") {
            tag.SetMustInput("<%=Me.MustInput %>");
            var textbox = combobox.find("input:text");
            if (textbox.attr("ReadOnly") != "readonly" && textbox.attr("disabled") != "disabled") {
                textbox.attr("MsgTitle", "<%=Me.MsgTitle %>");
            }
        }

        tag.Enabled(eval("<%=Me.Enabled %>".toLocaleLowerCase()));

        combobox.find("input:text").bind("focus", function () {
            var nowValue = indexHidden.val();
            var defaultValue = indexHidden.prop("defaultValue");
            if (nowValue != defaultValue) {
                var selectValue = combobox.find("ul li").eq(nowValue).attr('val');
                tag.attr("text", combobox.find("input:text").val());
                tag.attr("value", selectValue);
                indexHidden.prop("defaultValue", nowValue);
                var func = tag.attr("SelectChangeFunc");
                if (func) {
                    var combo = tag;
                    eval(func).call(combo, [combo.attr("Text"), combo.attr("Value")]);
                }
            }
            $("#<%=ComboHiddenText.ClientID %>").val(combobox.find("ul li").eq(nowValue).text());
            $("#<%=ComboHiddenValue.ClientID %>").val(combobox.find("ul li").eq(nowValue).attr('val'));
        });
        combobox.find("input:text").bind("blur", function () {
            var nowValue = indexHidden.val();
            var defaultValue = indexHidden.prop("defaultValue");
            if (nowValue != defaultValue) {
                var selectValue = combobox.find("ul li").eq(nowValue).attr('val');
                tag.attr("text", combobox.find("input:text").val());
                tag.attr("value", selectValue);
                indexHidden.prop("defaultValue", nowValue);
                var func = tag.attr("SelectChangeFunc");
                if (func) {
                    var combo = tag;
                    eval(func).call(combo, [combo.attr("Text"), combo.attr("Value")]);
                }
            }
            $("#<%=ComboHiddenText.ClientID %>").val(combobox.find("ul li").eq(nowValue).text());
            $("#<%=ComboHiddenValue.ClientID %>").val(combobox.find("ul li").eq(nowValue).attr('val'));
        });
    });
    $.fn.SetSelectedByText = function (text) {
        var tag = $(this);
        var ucKind = tag.get(0).tagName;
        var combo = tag.prev().find(".combobox");
        var ddsTbox = tag.prev().find("input:text[id$=_DropdownSetsTextBox]");
        var txtbox = combo.find("input:text");
        var hidden = combo.find("input:hidden[id$=_HiddenField]");
        var hidText = tag.prev().find("input:hidden[id$=_ComboHiddenText]");
        var hidValue = tag.prev().find("input:hidden[id$=ComboHiddenValue]");
        var list = combo.find("ul li");

        //temp delete
        if (list.length == 0) {
            hidden.val(-1);
            hidden.prop("defaultValue", -1);
            txtbox.val(text.replace(/(^\s*)|(\s*$)/g, ""));
            hidText.val(text.replace(/(^\s*)|(\s*$)/g, ""));
            hidValue.val("");
            tag.attr("Text", text.replace(/(^\s*)|(\s*$)/g, ""));
            tag.attr("Value", "");
            return false;
        }

        $.each(list, function (i) {
            if ($(this).text().replace(/(^\s*)|(\s*$)/g, "") == text.replace(/(^\s*)|(\s*$)/g, "")) {
                hidden.val(i);
                hidden.prop("defaultValue", i);
                txtbox.val(text.replace(/(^\s*)|(\s*$)/g, ""));
                hidText.val(text.replace(/(^\s*)|(\s*$)/g, ""));
                hidValue.val($(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));

                if (ucKind == "DROPDOWNSETS") {
                    ddsTbox.val($(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));
                    tag.attr("Dorpdown", text.replace(/(^\s*)|(\s*$)/g, ""));
                    tag.attr("TextBox", $(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));
                } else {
                    tag.attr("Text", text.replace(/(^\s*)|(\s*$)/g, ""));
                    tag.attr("Value", $(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));
                }
                result = false;
                return false;
            } else if (i == list.length - 1) {
                //temp delete
                hidden.val(-1);
                hidden.prop("defaultValue", -1);
                txtbox.val(text.replace(/(^\s*)|(\s*$)/g, ""));
                hidText.val(text.replace(/(^\s*)|(\s*$)/g, ""));
                hidValue.val("");
                tag.attr("Text", text.replace(/(^\s*)|(\s*$)/g, ""));
                tag.attr("Value", "");
                return false;
            }
        });
    }
    $.fn.SetSelectedByValue = function (value) {
        var tag = $(this);
        var ucKind = tag.get(0).tagName;
        var combo = tag.prev().find(".combobox");
        var ddsTbox = tag.prev().find("input:text[id$=_DropdownSetsTextBox]");
        var txtbox = combo.find("input:text");
        var hidden = combo.find("input:hidden[id$=_HiddenField]");
        var hidText = tag.prev().find("input:hidden[id$=_ComboHiddenText]");
        var hidValue = tag.prev().find("input:hidden[id$=ComboHiddenValue]");
        var list = combo.find("ul li");
        $.each(list, function (i) {
            if ($(this).attr("val").replace(/(^\s*)|(\s*$)/g, "") == value.replace(/(^\s*)|(\s*$)/g, "")) {
                hidden.val(i);
                hidden.prop("defaultValue", i);
                txtbox.val($(this).text().replace(/(^\s*)|(\s*$)/g, ""));
                hidText.val($(this).text().replace(/(^\s*)|(\s*$)/g, ""));
                hidValue.val($(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));

                if (ucKind == "DROPDOWNSETS") {
                    ddsTbox.val($(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));
                    tag.attr("Dorpdown", $(this).text().replace(/(^\s*)|(\s*$)/g, ""));
                    tag.attr("TextBox", $(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));
                } else {
                    tag.attr("Text", $(this).text().replace(/(^\s*)|(\s*$)/g, ""));
                    tag.attr("Value", $(this).attr("val").replace(/(^\s*)|(\s*$)/g, ""));
                }

                result = false;
            }
        });
    }
    $.fn.CustomComboFocus = function () {
        $(this).prev().find("input:text").focus();
    }
    $.fn.ComboboxAddClass = function (className) {
        $(this).prev().find("input:text").addClass(className);
    }
    $.fn.ComboboxRemoveClass = function (className) {
        $(this).prev().find("input:text").removeClass(className);
    }
    $.fn.SetComboText = function (text) {
        $(this).prev().find("input:text").val(text);
    }
    $.fn.GetComboText = function () {
        return $(this).prev().find("input:text").val();
    }

    </script>

后台主要代码

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
        For Each li As ListItem In ComboBox1.Items
            li.Attributes.Add("val", li.Value)
        Next

        MyBase.Render(writer)
        writer.Write("<CustomCombo id=""" + Me.ID + """ Text=""" + Me.SelectedText + """ Value=""" + Me.SelectedValue + """ HasEmpty=""" + Me.HasEmpty.ToString + """ Enabled=""" + Me.Enabled.ToString + """ MsgTitle=""" + Me.MsgTitle + """ SelectChangeFunc=""" + Me.SelectChangeFunc + """></CustomCombo>")
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Me.IsPostBack Then
            Me.ItemCount.Value = Me.Request(Me.ItemCount.UniqueID)
            Dim count As Integer = Convert.ToInt32(Me.ItemCount.Value)
            If count > 0 Then
                ComboBox1.Items.Clear()
                For i = 0 To count - 1
                    ComboBox1.Items.Add(New ListItem(Me.Request.Form(Me.ID + "_Text_" + i.ToString), Me.Request.Form(Me.ID + "_Value_" + i.ToString)))
                Next
                Me.ComboHiddenValue.Value = Me.Request(Me.ComboHiddenValue.UniqueID)
                Me.ComboHiddenText.Value = Me.Request(Me.ComboHiddenText.UniqueID)

                If TypeOf Me.Parent Is DropdownSets Then
                    SetSelectedItemByText(Me.ComboHiddenText.Value)
                Else
                    SetSelectedItemByValue(Me.ComboHiddenValue.Value)
                End If

                Me.ItemCount.Value = "0"
            End If
        Else
            If Not _SetEnabledInPageLoad Then
                Me.ViewState("CustomComboEnabled") = True
            End If
        End If

    End Sub

Public Sub SetSelectedItemByText(ByVal text As String)

        If ComboBox1.Items.FindByText(text) Is Nothing And Me.HasEmpty = True Then
            ComboBox1.Items.Insert(ComboBox1.Items.Count, New ListItem(text, text))
        End If

        ComboBox1.SelectedIndex = ComboBox1.Items.IndexOf(ComboBox1.Items.FindByText(text))

    End Sub

    Public Event SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
    Protected Sub ComboBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ComboBox1.SelectedIndexChanged
        RaiseEvent SelectedIndexChanged(sender, e)
    End Sub

    ReadOnly Property SelectedValue As String
        Get
            If ComboBox1.SelectedItem Is Nothing Then
                If String.IsNullOrEmpty(ComboHiddenValue.Value) Then
                    Return String.Empty
                Else
                    Return ComboHiddenValue.Value
                End If
            Else
                Return ComboBox1.SelectedItem.Value
            End If
        End Get
    End Property

ReadOnly Property SelectedText As String
        Get

            If ComboBox1.SelectedItem Is Nothing _
                OrElse (String.IsNullOrEmpty(CType(ComboBox1.FindControl("TextBox"), TextBox).Text) And _
                        String.IsNullOrEmpty(ComboBox1.SelectedItem.Text)) _
                OrElse (Not CType(ComboBox1.FindControl("TextBox"), TextBox).Text.Equals(ComboBox1.SelectedItem.Text) And _
                       ComboBox1.Items.FindByText(CType(ComboBox1.FindControl("TextBox"), TextBox).Text) Is Nothing And _
                       Not String.IsNullOrEmpty(CType(ComboBox1.FindControl("TextBox"), TextBox).Text)) Then

                Dim text As String = CType(ComboBox1.FindControl("TextBox"), TextBox).Text
                If ComboBox1.Items.FindByText(text) Is Nothing And HasEmpty = True Then
                    ComboBox1.Items.Insert(ComboBox1.Items.Count, New ListItem(text, text))
                    ComboBox1.SelectedIndex = ComboBox1.Items.IndexOf(ComboBox1.Items.FindByText(text))
                End If

                Return text
            Else
                Return ComboBox1.SelectedItem.Text
            End If
        End Get
    End Property

    Public Sub SetSelectedItemByValue(ByVal value As String)
        ComboBox1.SelectedIndex = ComboBox1.Items.IndexOf(ComboBox1.Items.FindByValue(value))
    End Sub