Ajax实现智能提示搜索功能
前端  /  管理员 发布于 4年前   337
一、效果图:
二、实现过程:
思路:
三、部分代码:
html:
<div id="searchbox"> <div><input type="text" id="txtTitle" /></div> <div id="btnSelect"><a href="">Google</a></div> </div> <div id="dtitles"></div>
css代码:
* { padding:0px; margin:0px;}#searchbox { margin-top:10px; height:37px; width:550px;}#searchbox div { float:left;} #txtTitle { height:35px; width:440px; line-height:35px; border:solid 1px #4791FF;}#btnSelect a{ width:100px; height:37px; background:#167ED9; display:block; line-height:37px; color:#ffffff; text-align:center; }a:link { text-decoration:none;}a:hover { cursor:pointer;}#dtitles { width:540px; height:90px; border:solid 1px #CCCCCC; display:none; font-size:12px;}.li1 { background:#F0F0F0;}
js代码:
$(function ()
{ //1.页面加载之后,找到文本框的内容对它触发一个事件 $("#txtTitle").keyup(function () { //2.获取到文本框的内容,注意去空格 var title = $.trim($("#txtTitle").val()); //3.获取到输入的内容之后,就要通过ajax传给后台 $.post("/Handler3.ashx", { "title": title }, function (data) { if (title == "") { $("#dtitles").hide(); } else { //显示展示div,把它清空 $("#dtitles").show().html(""); if (data == "") { $("#dtitles").text("没有相关数据!"); } else { $("#dtitles").append(data); //4.鼠标移上去之后,加一个背景 $("li").hover(function () { $(this).addClass("li1"); }, function () { $(this).removeClass("li1"); }); } } }); });});
ajax:
public void ProcessRequest(HttpContext context) { //1.提交过来之后,我们要接收 string title=context.Request.Form["title"]; //2.得到一个sql语句 string strsql = string.Format("select top 5 title from RNews where Title like '%{0}%' ",title); //3.那得到sql怎么去做处理? DataTable dt = SqlHelper.ExecuteDataSetText(strsql,null).Tables[0]; //4.我们最后要返回的是一个列表,要做字符串拼凑 StringBuilder sb = new StringBuilder(); //4.1判断得到的sql结果里面是否有数据 if (dt.Rows.Count > 0) { //4.1.1 sb.Append("<ul>"); for (int i = 0; i < dt.Rows.Count; i++) { sb.Append(string.Format("<li>{0}</li>", dt.Rows[i][0].ToString())); } sb.Append("</ul>"); } context.Response.Write(sb.ToString()); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号