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


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 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
js 通用订单代码
Dec 23 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
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
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
canvas绘制多边形
2017/02/24 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python简单文本处理的方法
2015/07/10 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
小学教育见习报告
2014/10/31 职场文书
培训计划通知
2015/07/15 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
python中 Flask Web 表单的使用方法
2022/05/20 Python