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的前缀匹配效率是非常高的, ...
随机推荐
- Linux下的.NET之旅:第一站,CentOS+Mono+Xsp构建最简单的ASP.NET服务器
一.Mono产生的背景 由于Linux/Unix等有更强的安全性.运行效率高.拥有大量优秀的开源组件,而.Net则有着其他语言无与伦比的开发效率,因此在非微软平台下运行.Net程序的需求很强烈.Mon ...
- [Voice communications] 声道的转换
本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正! 很多粤语剧都提供了两个声道,一个左声道为粤语,一个右声道有国语 ...
- JS实战 · 表单验证
思路: 1.定义页面 通过表格格式化表单: 表格行都有自己的背景颜色: 单元格中的数据(文本等)用div进行封装 ...
- Html5绘制时钟
最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: <script type="text/ja ...
- 【原】安装Win7和Ubuntu双系统后,Win7耳机无声音的解决办法
最近安装了Ubuntu的桌面版,作成了双系统,可是发现了一个问题:进入Win7后有时插耳机会没有声音,外放有声音.后来更新驱动也没有解决问题,最后在网上查到了解决办法. 产生原因:进入Ubuntu后, ...
- 《Spark快速大数据分析》—— 第五章 数据读取和保存
由于Spark是在Hadoop家族之上发展出来的,因此底层为了兼容hadoop,支持了多种的数据格式.如S3.HDFS.Cassandra.HBase,有了这些数据的组织形式,数据的来源和存储都可以多 ...
- 前端:图文混排-怎么在不使用float的情况下实现想要的效果呢?
异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 举个例子 重点:display:flex (参考:http://www.360do ...
- LINQ系列:LINQ to SQL Join连接
1. 一对多 var expr = context.Products .Where(p => p.Category.CategoryName == "LINQ to SQL" ...
- WPF textblock加入超链接
<TextBlock Grid.Row=" Margin="75,0,0,0"> <Hyperlink Name="BlogHl" ...
- 深入理解DOM事件类型系列第五篇——文本事件
× 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...