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

最新推荐文章于 2020-07-22 08:07:28 发布

Teln_小凯

最新推荐文章于 2020-07-22 08:07:28 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/qq873113580/article/details/10408853

版权

效果图

前台

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AutocompleteAsyn.ascx.cs" Inherits="Uni2Uni.ERP.Web.Main.UI.SCMWM.UserControl.AutocompleteAsyn" %>
<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 {
                    color: #861717;
                    cursor: pointer;
                }
    .ac_result_tip {
        border-bottom: 1px dashed #666;
        padding: 4px;
        font-size: 12px;
    }
</style>
<script type="text/javascript">
    //查询结果条数
    var resultCount<%=this.ClientID %> = 0;
    //选中的行
    var selectIndex<%=this.ClientID %> = 0;
    //用来判断鼠标是否在结果面板上面
    var isOnRsultPanel<%=this.ClientID %> = false;
    //文本框控件的ID
    var textBox<%=this.ClientID %> = "";
    //显示控件的ID
    var display<%=this.ClientID %> = "";
    //隐藏值控件的ID
    var value<%=this.ClientID %> = "";
    //请求
    function AjaxRequest<%=this.ClientID %>(input, e) {
        if (textBox<%=this.ClientID %> == "")
        {
            textBox<%=this.ClientID %> = $(input).attr("id");
        }
        if (display<%=this.ClientID %> == "")
        {
            display<%=this.ClientID %> = $(input).attr("display-key");
        }
        if (value<%=this.ClientID %> == "") {
            value<%=this.ClientID %> = $(input).attr("value-key");
        }
        var url = "Ajax/PageHandler/AutocompleteUCAsyn.ashx";//测试
        var val = $(input).val();
        var type = $("#" + $(input).attr("type-key")).val();
        //无数据
        $("#" + $(input).attr("msg-key")).text(val + "，按拼音排序。");
        //有输入才去查找
        if ((val != "" && e == null) || (val != "" && /37$|38$|39$|40$|13$/.test(e.keyCode) == false)) {
            $.getJSON(url, { type: type, parameter: val, rid: Math.random() }, function (data) {
                resultCount<%=this.ClientID %> = data.length;
                $("#suggest<%=this.ClientID %>").css("display", "block");
                //清空显示面板
                $("#" + $(input).attr("detail-key")).empty();
                if (resultCount<%=this.ClientID %> > 0) {
                    //有数据
                    //循环添加查找出来的项
                    $.each(data, function (i) {
                        if (i == 0) {
                            selectIndex<%=this.ClientID %> = 0;
                            $("#" + $(input).attr("detail-key")).append("<li οnclick='Select<%=this.ClientID %>();' id='" + data[i].value + "' index-key='" + i + "' οnmοuseοver='LiHover<%=this.ClientID %>(this);' style='background-color:#c8e3fc;'>" + data[i].display + "</li>");
                        } else {
                            $("#" + $(input).attr("detail-key")).append("<li οnclick='Select<%=this.ClientID %>();' id='" + data[i].value + "' index-key='" + i + "' οnmοuseοver='LiHover<%=this.ClientID %>(this);'>" + data[i].display + "</li>");
                        }
                    });
                }
                else {
                    //无数据
                    $("#" + $(input).attr("msg-key")).text("对不起，找不到：" + val);
                    resultCount<%=this.ClientID %> = 0;
                    $("#" + display<%=this.ClientID %>).val("");
                    $("#" + value<%=this.ClientID %>).val("");
                }
            });
        }
        else
        {
            $("#" + display<%=this.ClientID %>).val("");
            $("#" + value<%=this.ClientID %>).val("");
        }
    }
    
    //上下选择
    function InputKeyDown<%=this.ClientID %>(e)
    {
        if (resultCount<%=this.ClientID %> <= 0) {
            return;
        }
        switch (e.keyCode) {
            //上
            case 38:
                Up<%=this.ClientID %>();
                    break;
                    //下
                case 40:
                    Down<%=this.ClientID %>();
                    break;
                    //确定选择
                case 13:
                    Select<%=this.ClientID %>();
                    break;
            }
    }
     //li浮动的时候
     function LiHover<%=this.ClientID %>(li) {
        $(li).parent().children().css("background-color", "");
        $(li).css("background-color", "#c8e3fc");
        selectIndex<%=this.ClientID %> = $(li).attr("index-key");
    }
    function Up<%=this.ClientID %>() {
        $($("#" + $("#"+textBox<%=this.ClientID %>).attr("detail-key")).children().get(selectIndex<%=this.ClientID %>)).css("background-color", "");
        selectIndex<%=this.ClientID %>--;
        if (selectIndex<%=this.ClientID %> < 0) {
            selectIndex<%=this.ClientID %> = resultCount<%=this.ClientID %> - 1;
        }
        $($("#" + $("#" + textBox<%=this.ClientID %>).attr("detail-key")).children().get(selectIndex<%=this.ClientID %>)).css("background-color", "#c8e3fc");
    }
    function Down<%=this.ClientID %>() {
        $($("#" + $("#" + textBox<%=this.ClientID %>).attr("detail-key")).children().get(selectIndex<%=this.ClientID %>)).css("background-color", "");
        selectIndex<%=this.ClientID %>++;
        if (selectIndex<%=this.ClientID %> == resultCount<%=this.ClientID %>) {
            selectIndex<%=this.ClientID %> = 0;
        }
        $($("#" + $("#" + textBox<%=this.ClientID %>).attr("detail-key")).children().get(selectIndex<%=this.ClientID %>)).css("background-color", "#c8e3fc");
    }
    function Select<%=this.ClientID %>() {
        var value = $($("#" + $("#" + textBox<%=this.ClientID %>).attr("detail-key")).children().get(selectIndex<%=this.ClientID %>)).attr("id");
        var display = $($("#" + $("#" + textBox<%=this.ClientID %>).attr("detail-key")).children().get(selectIndex<%=this.ClientID %>)).text();
        $("#" + display<%=this.ClientID %>).val(display);
        $("#" + value<%=this.ClientID %>).val(value);
        $("#" + textBox<%=this.ClientID %>).val(display);
        $("#" + $("#" + textBox<%=this.ClientID %>).attr("msg-key")).text(display + "，按拼音排序。");
        $("#suggest<%=this.ClientID %>").css("display", "none");
    }
    function InputBlur<%=this.ClientID %>(input) {
        if (isOnRsultPanel<%=this.ClientID %> == false) {
            $("#suggest<%=this.ClientID %>").css("display", "none");
            if ($(input).val() == "") {
                $("#" + display<%=this.ClientID %>).val("");
                $("#" + value<%=this.ClientID %>).val("");
            }
        }
    }
    function InputFocus<%=this.ClientID %>(input) {
        if ($(input).val() == "中文/拼音") {
            $(input).val("").css("color", "black");
        }
        if ($(input).val() == "") {
            $("#" + display<%=this.ClientID %>).val("");
            $("#" + value<%=this.ClientID %>).val("");
        }
        AjaxRequest<%=this.ClientID %>(input, null);
    }
    function DivOnMousrHover<%=this.ClientID %>() {
        isOnRsultPanel<%=this.ClientID %> = true;
    }
    function DivOnMousrOut<%=this.ClientID %>() {
        isOnRsultPanel<%=this.ClientID %> = false;
    }
</script>
<asp:TextBox Text="中文/拼音" ForeColor="Gray" ID="arrcity" ClientIDMode="AutoID" runat="server" name="arrcity" autocomplete="off" Width="206px"></asp:TextBox>
<span id="a"></span>
<div οnmοuseοver="DivOnMousrHover<%=this.ClientID %>();" οnmοuseοut="DivOnMousrOut<%=this.ClientID %>();" 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 AutocompleteAsyn : 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("display-key", this.hdDisplayName.ClientID);
            this.arrcity.Attributes.Add("value-key", this.hdValueName.ClientID);
            this.arrcity.Attributes.Add("onkeyup", "AjaxRequest"+this.ClientID+"(this,event)");
            this.arrcity.Attributes.Add("onblur", "InputBlur"+this.ClientID+"(this)");
            this.arrcity.Attributes.Add("onfocus", "InputFocus"+this.ClientID+"(this)");
            this.arrcity.Attributes.Add("onkeydown", "InputKeyDown" + this.ClientID + "(event)");        
        }
    }
}