【网络公开课总结】自动搜索效果

 

 <div id="dtxt"><input type="text" id="txtTitle" /></div>
    <div id="dresult"></div>

 

js

/// <reference path="jquery-1.10.2.min.js" />

$(function () {//页面加载完毕之后
    $("#txtTitle").keyup(function () {//当在文本框里面输入内容的时候，触发一个事件
        var title = $.trim($(this).val());//获取到文本框的内容
        if (title == "") {
            $("#dresult").hide();
        }
        else {
            $("#dresult").show();
            $.post("/Handler1.ashx", { "title": title }, function (data) {//通过ajax把title提交给后台页面，并接收后台处理之后的结果
                $("#dresult").html("");//清空结果框里面的内容，避免内容重复叠加
                $("#dresult").append(data);
                $("#dresult li").hover(function () {
                    $(this).addClass("bg");
                }, function () {
                    $(this).removeClass("bg");
                });
                $("#dresult li").click(function () {
                    $("#txtTitle").val($(this).text());
                    $("#dresult").hide();
                });

            });
        }

    });
});

cs

 public void ProcessRequest(HttpContext context)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<ul>");
            string title = context.Request.Form["title"];//接收到从js里面传递过来的title
            string sSql = string.Format("select top 10 Title from RNews where Title like '%{0}%' order by CreatedTime desc ", title);//得到查询的sql语句
            DataTable dt = SqlHelper.ExecuteDataSetText(sSql, null).Tables[0];//得到sql语句在数据库对应的数据表
            if (dt.Rows.Count > 0)//有数据
            {
                for (int i = 0; i < dt.Rows.Count; i++)//把数据表的内容进行循环拼凑到sb里面
                {
                    sb.Append(string.Format("<li>{0}</li>", dt.Rows[i][0].ToString()));
                }
            }
            else
            { //没数据
                sb.Append("<li>没有相关数据</li>");
            }
            sb.Append("</ul>");
            context.Response.Write(sb.ToString());//将拼凑的内容返回给js
        }

 

 

css

* {
    padding: 0px;
    margin: 0px;
    font-family: "微软雅黑";
}

#txtTitle {
    width: 440px;
    height: 35px;
}

#dresult {
    width: 440px;
    border: solid 1px #ccc;
    display: none;
}

    #dresult ul {
        list-style-type: none;
    }

    #dresult li {
        margin: 5px 0px;
    }

.bg {
    background-color: #ccc;
}