ASP.NET 联想控件（Autocomplete）测试可用 ascx

效果图

 

前台

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AutocompleteNew.ascx.cs" Inherits="Uni2Uni.ERP.Web.Main.UI.SCMWM.UserControl.AutocompleteNew" %>

<style type="text/css">

    .gray {

        color: gray;

    }

    .ac_results {

        background: #fff;

        border: 1px solid #7f9db9;

        position: absolute;

        z-index: 10000;

        display:none;

    }

    .ac_results ul {

            margin:3px 0px;

            padding: 0px;

            list-style: none;

            font-size:12px;

        }

    .ac_results ul li {

        color:#05a;

        padding: 0px 4px;

        line-height:21px;

    }

    .ac_results ul li:hover {

            /*//background-color:#c8e3fc;*/

            color:#861717;

            cursor:pointer;

        }

    .ac_result_tip {

        border-bottom: 1px dashed #666;

        padding: 4px;

        font-size:12px;

    }

</style>

<script src="http://erp.uni2uni.com/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">



    //查询结果条数

    var resultCount = 0;

    //选中的行

    var selectIndex = 0;



    //请求

    function AjaxRequest(input, e) {

        var url = "Ajax/PageHandler/AutocompleteUC.ashx";

        var val = $(input).val().toString().trim();

        var type = $("#" + $(input).attr("type-key")).val();

        //无数据

        $("#" + $(input).attr("msg-key")).text(val + "，按拼音排序。");

        //有输入才去查找

        if ((val != "" && e == null)||(val != "" && /8$|37$|38$|39$|40$|13$/.test(e.keyCode) == false)) {

            $.getJSON(url, { type: type, parameter: val, rid: Math.random() }, function (data) {

                resultCount = data.length;

                $("#suggest<%=this.ClientID %>").css("display", "block");

                //清空显示面板

                $("#" + $(input).attr("detail-key")).empty();

                if (resultCount > 0) {

                    //有数据

                    //循环添加查找出来的项

                    $.each(data, function (i) {

                        if (i == 0) {

                            selectIndex = 0;

                            $("#" + $(input).attr("detail-key")).append("<li onclick='Select();' id='" + data[i].value + "' index-key='" + i + "' onmouseover='LiHover(this);' style='background-color:#c8e3fc;'>" + data[i].display + "</li>");

                        } else {

                            $("#" + $(input).attr("detail-key")).append("<li onclick='Select();' id='" + data[i].value + "' index-key='" + i + "' onmouseover='LiHover(this);'>" + data[i].display + "</li>");

                        }

                    });

                }

                else {

                    //无数据

                    $("#" + $(input).attr("msg-key")).text("对不起，找不到：" + val);

                    resultCount = 0;

                }

            });

        }

    }

    

    //li浮动的时候

    function LiHover(li)

    {

        $(li).parent().children().css("background-color", "");

        $(li).css("background-color", "#c8e3fc");

        selectIndex = $(li).attr("index-key");

    }



    //键盘上下选择

    window.onkeydown= function(e)

    {

        if (resultCount <= 0)

        {

            return;

        }

        switch (e.keyCode)

        {

            //上

            case 38:

                Up();

                break;

            //下

            case 40:

                Down();

                break;

            //确定选择

            case 13:

                Select();

                break;

        }

    }



    function Up()

    {

        $($("#" + $("#<%=this.ClientID %>_arrcity").attr("detail-key")).children().get(selectIndex)).css("background-color", "");

        selectIndex--;

        if (selectIndex < 0)

        {

            selectIndex = resultCount-1;

        }

        $($("#" + $("#<%=this.ClientID %>_arrcity").attr("detail-key")).children().get(selectIndex)).css("background-color", "#c8e3fc");

    }

    function Down() {

        $($("#" + $("#<%=this.ClientID %>_arrcity").attr("detail-key")).children().get(selectIndex)).css("background-color", "");

        selectIndex++;

        if (selectIndex == resultCount) {

            selectIndex = 0;

        }

        $($("#" + $("#<%=this.ClientID %>_arrcity").attr("detail-key")).children().get(selectIndex)).css("background-color", "#c8e3fc");

    }

    function Select()

    {

        var value = $($("#" + $("#<%=this.ClientID %>_arrcity").attr("detail-key")).children().get(selectIndex)).attr("id");

        var display = $($("#" + $("#<%=this.ClientID %>_arrcity").attr("detail-key")).children().get(selectIndex)).text();

        $("#<%=this.ClientID %>_hdDisplayName").val(display);

        $("#<%=this.ClientID %>_hdValueName").val(value);

        $("#<%=this.ClientID %>_arrcity").val(display);

        $("#" + $("#<%=this.ClientID %>_arrcity").attr("msg-key")).text(display + "，按拼音排序。");

        $("#suggest<%=this.ClientID %>").css("display","none");

    }



    function InputBlur(input)

    {

        $("#suggest<%=this.ClientID %>").css("display", "none");

    }



    function InputFocus(input)

    {

        AjaxRequest(input, null);

    }

</script>



<asp:TextBox ID="arrcity" ClientIDMode="AutoID" runat="server" name="arrcity" autocomplete="off" Style="color: rgb(0, 0, 0);" Width="206px"></asp:TextBox>

<input type="text" id="hdfocus" style="display: none">



<div class="ac_results" id="suggest<%=this.ClientID %>">

    <div id="msg<%=this.ClientID %>" class="gray ac_result_tip">请输入中文/拼音或者↑↓选择</div>

    <ul id="detail<%=this.ClientID %>">

    </ul>

</div>



<asp:HiddenField runat="server" ClientIDMode="AutoID" ID="hdDisplayName" />

<asp:HiddenField runat="server" ClientIDMode="AutoID" ID="hdValueName" />

<asp:HiddenField runat="server" ClientIDMode="AutoID" ID="hdDataType" />

 

后台

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;



namespace Uni2Uni.ERP.Web.Main.UI.SCMWM.UserControl

{

    public partial class AutocompleteNew : System.Web.UI.UserControl

    {

        #region 属性

        public string DataType { get; set; }



        /// <summary>

        /// 值

        /// </summary>

        public string ValueName

        {

            get { return hdValueName.Value.Trim(); }

        }



        /// <summary>

        /// 名称

        /// </summary>

        public string DisplayName

        {

            get { return hdDisplayName.Value.Trim(); }

        }



        /// <summary>

        /// 条件参数

        /// </summary>

        public string Parameter { set; get; }

        #endregion



        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                hdDataType.Value = DataType;

            }



            this.arrcity.Attributes.Add("detail-key", "detail" + this.ClientID);

            this.arrcity.Attributes.Add("msg-key", "msg"+this.ClientID);

            this.arrcity.Attributes.Add("type-key", this.hdDataType.ClientID);

            this.arrcity.Attributes.Add("onkeyup", "AjaxRequest(this,event)");

            this.arrcity.Attributes.Add("onblur", "InputBlur(this)");

            this.arrcity.Attributes.Add("onfocus", "InputFocus(this)");            

        }

    }

}