.NET TEXTBOX 动态提示功能

最新推荐文章于 2024-10-05 09:16:25 发布

zr1985712719

最新推荐文章于 2024-10-05 09:16:25 发布

阅读量214

点赞数 1

分类专栏： .NET C# 文章标签： textbox .net function xmlhttprequest null search

.NET 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

跟google你输入关键字，动态显示大概条数的提示，首先看下效果

第一步css:

查看代码复制到剪贴板

#dSuggest {
z-index:0;
position:absolute;
background-color:#ffffff;
}
#sug {
list-style:none;
border:solid 1px #09f;
margin-left:0;
margin-top:0;
width:310px;
}
#sug li {
width:100%;
padding-left:2px;
}
#sug span {
position:absolute;
z-index:200;
right:3px;
}
.select {
background-color:#09f;
color:#ffffff;
cursor:default;
}

    #dSuggest {
        z-index:0;
        position:absolute;
        background-color:#ffffff;
    }
    #sug {
        list-style:none;
        border:solid 1px #09f;
        margin-left:0;
        margin-top:0;
        width:310px;
    }
    #sug li {
        width:100%;
        padding-left:2px;
    }
    #sug span {
        position:absolute;
        z-index:200;
        right:3px;
    }
    .select {
        background-color:#09f;
        color:#ffffff;
        cursor:default;
    }

第二步javascript：

查看代码复制到剪贴板

    var XMLHttp=false;
    var j=-1;
    function CreateXMLHttpRequest() {
        if(window.ActiveXObject)
        {
            XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
            XMLHttp = new XMLHttpRequest();
        }
        if(!XMLHttp && typeof XMLHttpRequest != 'undefined') {
            XMLHttp = new XMLHttpRequest();
        }
    }

    function GetSuggest(keyword,e) {
        var keyc=GetKeyCode(e);

        if(keyc==40 || keyc==38 || keyc==13)
            return;
        var _url="Search.ashx?keyword="+escape(keyword);

        CreateXMLHttpRequest();
        XMLHttp.onreadystatechange=function(){
            if(XMLHttp.readystate==4) {
                if(XMLHttp.status==200) {
                    $("dSuggest").innerHTML=XMLHttp.responseText;
                    j=-1;
                }
            }
        }
        XMLHttp.open("get",_url,true);
        XMLHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        XMLHttp.send(null);
    }

    function set_style(num) {//设置样式
       for(var i=0;i< $$().length;i++) {
           if(i>=0 && i< $$().length&&i==num) {
                $$()[i].className="select";
           }
           else
           {
              $$()[i].className="";
           }
          }

    }

    function mo(nodevalue) {
        j=nodevalue;
        set_style(j);
    }

    function form_submit() {
        var lis=$$();
        if(lis==null)
            return;
        for(var i=0;i
"));
                $('ctl00_ContentPlaceHolder1_txtKeyword').value=key;
                $("dSuggest").innerHTML="";
            }
        }

        form_submits();
    }

    function form_submits() {
         var stainfo = $("ctl00_ContentPlaceHolder1_stainfo").value;
         var pno = $("ctl00_ContentPlaceHolder1_txtKeyword").value;
         if(stainfo == "in")
         {
            window.location = "inStock.aspx?sta=in&pno="+pno;
         }
         else
         {
            window.location = "inStock.aspx?pno="+pno;
         }
    }

    function cleanBox()
    {
        $("dSuggest").innerHTML="";
    }

    function updown(e) {
        var keyc=GetKeyCode(e);

        if(keyc==40 || keyc==38) {
            if($$()==null)
                return;
            if(keyc==40) {
                j++;
                if(j>=$$().length)
                {
                  j=0;
                }
            } else if(keyc==38) {
                j--;
                if(j==-1)
                    j=$$().length-1;

            }
            set_style(j);
        }
    }

    function GetKeyCode(e) {//取得不同浏览器下的键盘事件值
        var keyc;
        if(window.event) {//ie键盘事件
		    keyc=e.keyCode;
	    } else if (e.which) {//火狐
			keyc=e.which;
	    }
	    return keyc;
    }

    function $(id) {
        return document.getElementById(id);
    }

    function $$() {
        var ul=$("sug");
        if(ul==null)
            return null;
        return ul.getElementsByTagName("li");
    }
    //getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight
    function getPos(el,sProp) {
        var iPos = 0;
        while (el!=null) {
            iPos+=el["offset" + sProp];
            el = el.offsetParent;
        }
        return iPos;
    }
    function setPosition(obj) {
        $('dSuggest').style.left=getPos(obj,'Left');
        $('dSuggest').style.top=getPos(obj,'Top')+obj.offsetHeight
    }

第三步：ASPX页面设置

查看代码复制到剪贴板

<FORM id=form1 onkeypress="if(GetKeyCode(event)==13){return false;}" runat="server" 标签>
<INPUT style="WIDTH: 310px" onkeydown=if(GetKeyCode(event)==13)form_submit(); id=txtKeyword onkeyup=GetSuggest(this.value,event);updown(event) runat="server" autocomplete="off">
<DIV id=dSuggest></DIV>
</FORM>

第四步：创建文件search.ashx

查看代码复制到剪贴板

< %@ WebHandler Language="C#" Class="Search" %>

using System;
using System.Web;

using System.Data.SqlClient;

public class Search : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string sKeyword = context.Request["keyword"];
        if (string.IsNullOrEmpty(sKeyword))
        {
            context.Response.End();
        }
        SqlConnection conn = new SqlConnection("Server=(local);User ID=sa;Password=123;DataBase=CMStock");
        SqlCommand cmd = new SqlCommand("select top 20 * from Product where pno like '" + sKeyword + "%' OR name like '%" + sKeyword + "%';", conn);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            context.Response.Write("

 
 
  
  ");
            int i = 0;
            while (dr.Read())
            {
                string pno = dr["pno"].ToString();
                if (pno.Length > 15)
                {
                    pno = pno.Substring(0, 15) + "...";
                }
                string pname = dr["name"].ToString();
                if (pname.Length > 30)
                {
                    pname = pname.Substring(0, 30) + "...";
                }
                context.Response.Write(string.Format("

  
  
{1}{2}

", i, pno, pname));
                i++;
            }
            context.Response.Write("

");
        }
        else
        {

            context.Response.Write("

 
 
  
  ");
            context.Response.Write(string.Format("

  
  
{1}{2}

", 0, sKeyword, "该商品货号货名称错误，请更换！"));
            context.Response.Write("

");
        }

        conn.Close();
        dr.Close();
        cmd.Dispose();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

运行收工！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。