首页 > 代码库 > 【网络公开课总结】自动收索效果
【网络公开课总结】自动收索效果
<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;}
【网络公开课总结】自动收索效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。