前端搜索+高亮关键词
作者：秋了秋 发表时间：2016年04月20日
今天来讲讲前端搜索如何做，后端搜索是从数据库匹配信息，而前端搜索是从json数据中匹配关键词，主要用到json数据的for遍历，假如有以下的json数据：
var faq={
"订阅流程":{
"如何订阅秋叶网络博客？":"进入netblog.cn首页点击菜单栏下面的订阅博客图标输入邮箱地址",
"多久推送一次？":"邮件系统每天都会对netblog.cn首页进行校验，如果有新文章，将会以邮件形式推送给订阅者",
"订阅后可以关闭吗？":"可以",
},
"投稿":{
"投稿地址是哪里？":"//netblog.cn/tougao",
"投稿有限制吗?":"具体细则可到投稿页面查看，另外消极，异端，引起社会强烈反动的内容将作垃圾处理。情感、技术、正能量将被提拔",
"有稿费吗?":"只要是首发并且优质的文章博主将会依据情况颁发支付宝奖金，所以还望投稿者在稿后注明支付宝账号",
"什么是首发？":"为本人原创，并且在其他网站上未曾发布过"
},
"咨询":{
"如何咨询到博主？":"在网站菜单栏下面或者页脚处均有博主的qq联系方式图标，点击即可进行对话",
"什么时候可以咨询？":"时间不定，只要博主有空定会解答，对于一些简单的问题还望自己先思考下不懂再问",
},
"哈哈哈":{}
}
如上所示有9个question,如何进行关键词匹配技术呢？，用for循环遍历该对象，并把匹配到的question逐条插入到网页中，假如我们有个表单：
<form id="search" action="//netblog.cn" method="get"> <input type="text" id="searchtext"/> <input type="submit" value="搜索"/> </form> <ul id="myul"></ul>
我们把触发事件绑定到submit上，当触发这一事件时获取input的值，同时定义两个变量content和b留作后面使用，b是匹配条数，content是字符串拼接容器：
$("#search").submit(function(){
var valer=$("#searchtxt").val();content="";var b=0;
现在开始第一层级的遍历，遇到“哈哈哈”则跳过，因为这是一组没用的数据，：
for(var i in faq){
if(i=="哈哈哈"){
continue;
}else{}
现在开始第二层级的遍历，就是基于i来下一级的遍历，为了支持大小写匹配，需要用到toLowerCase(),然后用search去匹配：
for(var j in faq[i]){
var low_j=j.toLowerCase();
var low_jj=faq[i][j].toLowerCase();
var index=low_j.search(valer.toLowerCase());
var index2=low_jj.search(valer.toLowerCase());
如果匹配到了，就把内容叠加给content容器，同时给b加1，高亮关键词是通过给匹配词加hightlight实现：
if(index>-1){
content+="<li><span class='faq-title'>"+j.substring(0,index)+"<span class='f-theme hightlight'>"+valer+"</span>"+j.substring((index+valer.length))+"</span>";
content+="<div class='faq-detail hidden'>"+faq[i][j];
content+="</div></li>";
b++;
}
如果在标题中没有关键词则转向回答内容中去搜索,这种情况也算搜索到了，b计数+1：
else if(index2>-1){
content+="<li><span class="faq-title">"+title+"</span>";
content+="<div class="faq-detail">"+faq[i][j].substring(0,index)+"<span class="f-theme hightlight">"+valer+"</span>"+faq[i][j].substring((index+valer.length));
content+="</div></li>";
b++;
}
}//结束第二层for循环
}//结束第一层for循环
最后把内容插入到网页中，同时要用return false阻止表单提交操作：
$("#myul").html(content);
return false;
})//end submit
1
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/442.html