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

代码如下:

<!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>

赞 (0)

相关推荐

  • js 正则表达式学习笔记之匹配字符串

    js 正则表达式学习笔记之匹配字符串

    今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高亮练手,所以用js代码当作例子) 复制代码 代码如下: var str1 = "我是字符串1哦,快把我取走", str2 = "我是字符串2哦,快把我取走"; 比如这样一个字符串,匹配起来很简单 /"[^"]*"/g 即可.   PS: 白色截图是 chrome 34 控制台中

  • js正则表达式之$1$2$3$4$5$6$7$8$9属性，返回子匹配的结果

    功能:$1-$9存放着正则表达式中最近的9个正则表达式的匹配结果,这些结果按照子匹配的出现顺序依次排列. 基本语法RegExp.$n 注意:这些属性是静态的,除了replace中的第二个参数可以省略RegExp之外,其他地方使用都要加上RegExp. 案例讲解:demo1 复制代码 代码如下: <html> <script language="javascript" type="text/javascript"> //创建要进行匹配的字符串

  • python通过BF算法实现关键词匹配的方法

    本文实例讲述了python通过BF算法实现关键词匹配的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: #!/usr/bin/python # -*- coding: UTF-8 # filename BF import time """ t="this is a big apple,this is a big apple,this is a big apple,this is a big apple." p="apple&q

  • js 获取中文拼音,Select自动匹配字母获取值的代码

    复制代码 代码如下: <script type="text/javascript"> var key2code = {65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j", 75:"

  • JS仿百度搜索自动提示框匹配查询功能

    1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q

  • Java/Js下使用正则表达式匹配嵌套Html标签

    Java/Js下使用正则表达式匹配嵌套Html标签

    通用 HTML 标签区配正则 最近看网站日志,发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,顿时来了兴趣.就拿回来改改,成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的处理能力较弱,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错滴. 复制代码 代码如下: <script type="text/javascript"> var str = "

  • js实现带搜索功能的下拉框实时搜索实时匹配

    js实现带搜索功能的下拉框实时搜索实时匹配

    1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT

  • JS 正则表达式（学习笔记2）匹配网址url参数

    . 匹配除换行符的任意字符 \w 匹配字母,数字,下划线,汉字 \s 匹配任意空白符 \d 匹配数字 ^ 匹配字符开始位置 $ 匹配字符结束位置 * 重复零次或更多次 + 重复一次或更多次 ? 重复零次或一次 {n} 重复N次 {n,} 重复N次或更多次 {n,m} 重复N次或m次url参数匹配的问题 var str="http://ladjkfldfjlfjlafjlfk/-1-1.html?sdlfjsdlkfjsdlfjo";//这是一个url //要求把URL里面-1.html

  • 1秒50万字!js实现关键词匹配

    1秒50万字!js实现关键词匹配

    在论坛和聊天室这样的场景里,为了保证用户体验,我们经常需要屏蔽很多不良词语.对于单个关键词查找,自然是indexOf.正则那样的方式效率比较高.但对于关键词较多的情况下,多次重复调用indexOf.正则的话去匹配全文的话,性能消耗非常大.由于目标字符串通常来说体积都比较大,所以必须要保证一次遍历就得到结果.根据这样的需求,很容易就想到对全文每个字符依次匹配的方式.比如对于这段文字:"Mike Jordan had said "Just do IT", so Mark has

  • js正则表达式匹配数字字母下划线等

    1.一个正则表达式,只含有汉字.数字.字母.下划线不能以下划线开头和结尾: ^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$ 其中: ^ 与字符串开始的地方匹配 (?!_) 不能以_开头 (?!.*?_$) 不能以_结尾 [a-zA-Z0-9_\u4e00-\u9fa5]+ 至少一个汉字.数字.字母.下划线 $ 与字符串结束的地方匹配 放在程序里前面加@,否则需要\\进行转义 @"^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]

随机推荐