仿百度的关键词匹配搜索示例


Posted in Javascript onSeptember 25, 2013
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>关键词匹配搜索仿百度</title> 
<meta name="description" content=" 内容介绍不超过100个中文"> 
<meta name="keywords" content=" 内容相关关键词3-5个"> 
<style> 
body, ul, li { margin: 0; padding: 0;} 
body{ font-size:12px; font-family:sumsun,arial;background:#FFFFFF;} 
.gover_search{ position:relative; z-index:99; height:63px; padding:15px 0 0 20px; border:1px solid #b8cfe6; border-bottom:0; background:url(../images/gover_search_bg.gif) repeat-x 0 0;} 
.gover_search_form{height:36px;} 
.gover_search .search_t{ float:left; width:112px; line-height:26px; color:#666;} 
.gover_search .input_search_key{ float:left; width:462px; height:18px; padding:3px; margin-right:5px; border:1px solid #ccc; line-height:18px; background:#fff;} 
.gover_search .search_btn{ float:left; width:68px; height:26px; overflow:hidden; border:1px solid #ccc; text-align:center; color:#ff3300; letter-spacing:5px; background:url(../images/gover_search_bg.gif) no-repeat 0 -79px; cursor:pointer; font-weight:bold;} 
.gover_search .search_suggest{ position:absolute; z-index:999; left:132px; top:41px; width:468px; border:1px solid #ccc;border-top:none; display:none;color:#004080; } 
.gover_search .search_suggest li{height:24px; overflow:hidden; padding-left:3px; line-height:24px; background:#fff; cursor:default;} 
.gover_search .search_suggest li.hover{background:#ddd;} 
.num_right{float:right;text-align:right;line-height:24px;padding-right:10px} 
</style> 
</head> <body> 
<div class="gover_search"> 
<div class="gover_search_form clearfix"> 
<span class="search_t">关键词匹配搜索</span> 
<input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入关键词直接搜索" /> 
<button type="submit" class="search_btn">搜索</button> 
<div class="search_suggest" id="gov_search_suggest"> 
<ul> 
</ul> 
</div> 
</div> 
</div> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
//实现搜索输入框的输入提示js类 
function oSearchSuggest(searchFuc){ 
var input = $('#gover_search_key'); 
var suggestWrap = $('#gov_search_suggest'); 
var key = ""; 
var init = function(){ 
input.bind('keyup',sendKeyWord); 
input.bind('blur',function(){setTimeout(hideSuggest,100);}) 
} 
var hideSuggest = function(){ 
suggestWrap.hide(); 
} 
//发送请求,根据关键字到后台查询 
var sendKeyWord = function(event){ 
//键盘选择下拉项 
if(suggestWrap.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40){ 
var current = suggestWrap.find('li.hover'); 
if(event.keyCode == 38){ 
if(current.length>0){ 
var prevLi = current.removeClass('hover').prev(); 
if(prevLi.length>0){ 
prevLi.addClass('hover'); 
input.val(prevLi.html()); 
} 
}else{ 
var last = suggestWrap.find('li:last'); 
last.addClass('hover'); 
input.val(last.html()); 
} 
}else if(event.keyCode == 40){ 
if(current.length>0){ 
var nextLi = current.removeClass('hover').next(); 
if(nextLi.length>0){ 
nextLi.addClass('hover'); 
input.val(nextLi.html()); 
} 
}else{ 
var first = suggestWrap.find('li:first'); 
first.addClass('hover'); 
input.val(first.html()); 
} 
} 
//输入字符 
}else{ 
var valText = $.trim(input.val()); 
if(valText ==''||valText==key){ 
return; 
} 
searchFuc(valText); 
key = valText; 
} 
} 
//请求返回后,执行数据展示 
this.dataDisplay = function(data){ 
if(data.length<=0){ 
suggestWrap.hide(); 
return; 
} 
//往搜索框下拉建议显示栏中添加条目并显示 
var li; 
var tmpFrag = document.createDocumentFragment(); 
suggestWrap.find('ul').html(''); 
for(var i=0; i<data.length; i++){ 
li = document.createElement('LI'); 
li.innerHTML = data[i]; 
tmpFrag.appendChild(li); 
} 
suggestWrap.find('ul').append(tmpFrag); 
suggestWrap.show(); 
//为下拉选项绑定鼠标事件 
suggestWrap.find('li').hover(function(){ 
suggestWrap.find('li').removeClass('hover'); 
$(this).addClass('hover'); 
},function(){ 
$(this).removeClass('hover'); 
}).bind('click',function(){ 
$(this).find("span").remove(); 
input.val(this.innerHTML); 
suggestWrap.hide(); 
}); 
} 
init(); 
}; 
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名 
var searchSuggest = new oSearchSuggest(sendKeyWordToBack); 
//这是一个模似函数,实现向后台发送ajax查询请求,并返回一个查询结果数据,传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求 
//参数为一个字符串,是搜索输入框中当前的内容 
function sendKeyWordToBack(keyword){ 
/* var obj = { 
"keyword" : keyword 
}; 
$.ajax({ 
type: "POST", 
url: "${ctx}/front/suqiu2/search/prompt-keyword.action", 
async:false, 
data: obj, 
dataType: "json", 
success: function(data){ 
//var json = eval("("+data+")"); 
var key=data.split(","); 
var aData = []; 
for(var i=0;i<key.length;i++){ 
//以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回 
if(key[i]!=""){ 
aData.push(key[i]); 
} 
} 
//将返回的数据传递给实现搜索输入框的输入提示js类 
searchSuggest.dataDisplay(aData); 
} 
}); */ 
//以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回 
var aData = []; 
aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据1'); 
aData.push('<span class="num_right">约200个</span>'+keyword+'返回数据2'); 
aData.push('<span class="num_right">约100个</span>'+keyword+'返回数据3'); 
aData.push('<span class="num_right">约50000个</span>'+keyword+'返回数据4'); 
aData.push('<span class="num_right">约1044个</span>'+keyword+'2012是真的'); 
aData.push('<span class="num_right">约100个</span>'+keyword+'2012是假的'); 
aData.push('<span class="num_right">约100个</span>'+keyword+'2012是真的'); 
aData.push('<span class="num_right">约100个</span>'+keyword+'2012是假的'); 
//将返回的数据传递给实现搜索输入框的输入提示js类 
searchSuggest.dataDisplay(aData); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
jquery 页面滚动到指定DIV实现代码
Sep 25 #Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 #Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 #Javascript
js读取注册表的键值示例
Sep 25 #Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 #Javascript
简单常用的幻灯片播放实现代码
Sep 25 #Javascript
javascript date格式化示例
Sep 25 #Javascript
You might like
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php开发工具有哪五款
2015/11/09 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现批量读取word中表格信息的方法
2015/07/30 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
Django封装交互接口代码
2020/07/12 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
销售总监工作职责
2013/11/21 职场文书
合作经营协议书
2014/04/17 职场文书
企业宣传策划方案
2014/05/29 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS