Ajax制作智能提示搜索
一、效果图:
二、实现过程:
思路:
三、部分代码:
html:
<div id="searchbox">
<div><input type="text" id="txtTitle" /></div>
<div id="btnSelect"><a href="javascript:;">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());
}
Ajax制作智能提示搜索的更多相关文章
- Ajax (jquery)实现智能提示搜索框(in Django)
搜索框输入搜索名字,从数据库中筛选名字, 如果有包含输入的字母的名字则以json格式返回并且显示在搜索框下: html文件: <!DOCTYPE html> <ht ...
- easyui combobox 智能提示搜索
<!-- 获取机会点名称列表 --><script> function initOpportunityNameFuzzyQuery() { $('#jihuidianmingc ...
- Servlet+Ajax实现搜索框智能提示
简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...
- Servlet+Ajax实现搜索智能提示
一般在百度搜索框输入关键词时,会弹出一些相关信息提示,方便点选: 页面(search.jsp): <input type="text" name="keyWords ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- 使用jsonp跨域调用百度js实现搜索框智能提示(转)
http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...
- 各大搜索引擎智能提示API(JSONP跨域实现自动补全搜索建议)
---------------------------------------搜索引擎JSONP接口--------------------------------------------- 提示:U ...
- 程序员编程艺术第三十六~三十七章、搜索智能提示suggestion,附近点搜索
第三十六~三十七章.搜索智能提示suggestion,附近地点搜索 作者:July.致谢:caopengcs.胡果果.时间:二零一三年九月七日. 题记 写博的近三年,整理了太多太多的笔试面试题,如微软 ...
- Ternary Search Tree 应用--搜索框智能提示
前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...
随机推荐
- CSS选择器小结
在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...
- 译文---C#堆VS栈(Part One)
前言 本文主要是讲解C#语言在内存中堆.栈的使用情况,使读者能更好的理解值类型.引用类型以及线程栈.托管堆. 首先感谢原文作者:Matthew Cochran 为我们带来了一篇非常好的文章,并配以大量 ...
- Azure PowerShell (4) 使用PowerShell管理多个订阅
<Windows Azure Platform 系列文章目录> 笔者手上有两个Azure账户. - Azure Global (windowsazure.com)账户.有两个订阅. - 世 ...
- Oracle:从SQL文件批量导入数据
进入DOS界面. 进入SQL文件目录. 在命令提示下运行SqlPlus,c:\sql>sqlplus user_name/password@net_service_name 指定SQL执行日志文 ...
- C语言 · 前缀表达式
问题描述 编写一个程序,以字符串方式输入一个前缀表达式,然后计算它的值.输入格式为:"运算符 对象1 对象2",其中,运算符为"+"(加法)."-&q ...
- iOS-C基础
iOS开发系列--C语言之基础知识 概览 当前移动开发的趋势已经势不可挡,这个系列希望浅谈一下个人对IOS开发的一些见解,这个IOS系列计划从几个角度去说IOS开发: C语言 OC基础 IOS开发(i ...
- 谈谈JAR
JAR(Java Archive File) JAR 文件格式以流行的 ZIP 文件格式为基础. 与 ZIP 文件不同的是,JAR 文件不仅用于压缩和发布,而且还用于部署和封装库.组件和插件程序,并可 ...
- python中协程
在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping 数据结构,来记录与 ...
- JavaScript == 、!=、===、!===的比较
; '; ; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同,其值 ...
- MVC4做网站后台:用户管理 —用户
这块进行用户管理,可以浏览.查询已注册的用户,修改用户资料,删除用户等.没有做添加用户,不知是否必要.列表页还是使用easyui的datagrid.这个思路跟用户组的方式差不多. 1.接口Interf ...