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


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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
js跳转页面方法总结
Jan 29 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
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魔术变量用法实例详解
2014/11/13 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
python提取内容关键词的方法
2015/03/16 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python绘制圆柱体的方法
2018/07/02 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
python中time.ctime()实例用法
2021/02/03 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
2014年底工作总结
2014/12/15 职场文书
违纪检讨书范文
2015/01/27 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
安全生产奖惩制度
2015/08/06 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
Python内置的数据类型及使用方法
2022/04/13 Python