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)");            
        }
    }
}