首页 > 代码库 > 【网络公开课总结】自动收索效果

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

 

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

 

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