仿Google的搜索下拉框

最新推荐文章于 2019-03-13 13:25:42 发布

银狐被占用

最新推荐文章于 2019-03-13 13:25:42 发布

阅读量2.3k

点赞数

分类专栏： ASP.NET Ajax 文章标签： google string dataset function textbox search

本文链接：https://blog.csdn.net/baby97/article/details/4270233

版权

ASP.NET 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Ajax

6 篇文章 0 订阅

订阅专栏

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<style>
ul,li {
    list-style:none;
margin-left: 1px;
margin-bottom:0;
padding: 0;
border: 0;
list-style-type: none;
list-style-image: none;
}
.show {
    z-index:99;
    font-size:12px;
    border:1px outset;
}
.show span {
    float:right;
}
.show div {
    width:100%;
    height:100%;
}
.show div ul li span {
    float:right;
}
.show div ul li {
    text-align:left;
    color:red;
    width:100%;
    cursor:default;
}
.blue {
    background:#0A246A;color:#ffffff;text-decoration:none;
}
.white {
    background:#ffffff;
}
</style>
<script type="text/javascript">
function CPos(x, y)
{
    this.x = x;
    this.y = y;
}
//获取控件的位置
function GetObjPos(ATarget)
{
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);

    var target = target.offsetParent;
    while (target)
    {
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;

        target = target.offsetParent
    }

    return pos;
}
function showdivtxt(txtobj){
showtxt.style.width=txtobj.offsetWidth;
var p = GetObjPos(txtobj);
showtxt.style.left=p.x;
showtxt.style.top=p.y+txtobj.offsetHeight;
if(txtobj.value.replace(/(/s*$)/g, "")!=""){
//异步取数据
var ds = _Default.SearchTxt(txtobj.value).value;
var s;
if (ds.Tables[0].Rows.length>0){
        s="<ul>";
     showtxt.style.display='block';
     for(var i=0;i<ds.Tables[0].Rows.length;i++){
         s+="<li class='white' οnclick=/"<%=this.tb_search.ClientID %>.value='"+ds.Tables[0].Rows[i]["tagword"]+"';showtxt.style.display='none';/" οnmοuseοut='changebgw(this);' οnmοuseοver='changebgb(this);'><span style='color:green;'>"+ds.Tables[0].Rows[i]["result"]+" 结果</span>"+ds.Tables[0].Rows[i]["tagword"]+"</li>";
     }
     s+="</ul>";
}
document.getElementById("txt09").innerHTML = s;
}
else{
showtxt.style.display='none';
}
}
function changebgb(li_obj){
    li_obj.className='blue';
}
function changebgw(li_obj){
    li_obj.className='white';
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="show" id="showtxt" style="display:none; position:absolute;"><div id="txt09"></div><span οnclick="showtxt.style.display='none';" style="cursor:hand;"><u>关闭[X]</u></span></div>
    <div>

default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
    public int flag;
    public string space;
    protected void Page_Load(object sender, EventArgs e)
    {

//注册
        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
        this.tb_search.Attributes.Add("onkeyup", "showdivtxt(" + this.tb_search.ClientID + ");");
    }
    public void AddSearchWord(string word) {
        if (DBClass.ExecScalar("Select Count(*) From T_SearchReault Where tagword='" + word.Replace("'", "''") + "'", "") <= 0)
        {
            DBClass.ExecSQL("Insert Into T_SearchReault Values('" + word.Replace("'", "''") + "',1)");
        }
        else
        {
            DBClass.ExecSQL("Update T_SearchReault Set searchcount=searchcount+1 Where tagword='" + word.Replace("'", "''") + "'");
        }
    }
    [AjaxPro.AjaxMethod]
    public DataSet SearchTxt(string txt) {
        string Sql = @"select top 10 s.tagword,count(t.treename) result
                    from T_SearchReault s
                    left join T_Tree t on s.tagword=t.treename ";
        string order = @" group by s.tagword,s.searchcount order by s.searchcount desc";
        if(txt.Trim()!=""){
            Sql += " Where ";
        }
        string[] s_a = txt.Replace("'","''").Split(new char[] { ' ' });
        foreach (string s in s_a) {
            if (s != "") {
                Sql += " s.tagword like '%" + s.ToString() + "%'";
            }
        }
        Sql += order;
        DataSet ds = DBClass.getDataSet(Sql, "tb");
        return ds;
    }
    protected void bt_search_Click(object sender, EventArgs e)
    {
        AddSearchWord(tb_search.Text);
    }
}

sql

create table T_SearchReault(
id int identity(1,1),
tagword varchar(500) null,
searchcount int
)

CREATE TABLE [dbo].[T_Tree] (
[id] [int] IDENTITY (1, 1) NOT NULL ,
[treename] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[parentid] [int] NULL ,
[treecode] [varchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
[url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL

)

银狐被占用

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
6
评论
仿Google的搜索下拉框

default.aspxhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > 无标题页ul,li { list-style:none; margin-left: 1px; margin-bottom:0; padding: 0; border: 0;
复制链接

扫一扫