当前位置:秋叶网络博客 前端编程 ◊ 前端搜索+高亮关键词

前端搜索+高亮关键词

作者:秋叶 发表时间:2016年4月20日

今天来讲讲前端搜索如何做,后端搜索是从数据库匹配信息,而前端搜索是从json数据中匹配关键词,主要用到json数据的for遍历,假如有以下的json数据:

var faq={
 "订阅流程":{
 "如何订阅秋叶网络博客?":"进入www.mizuiren.com首页点击菜单栏下面的订阅博客图标输入邮箱地址",
 "多久推送一次?":"邮件系统每天都会对www.mizuiren.com首页进行校验,如果有新文章,将会以邮件形式推送给订阅者",
 "订阅后可以关闭吗?":"可以",
 },
 "投稿":{
 "投稿地址是哪里?":"http://www.mizuiren.com/tougao",
 "投稿有限制吗?":"具体细则可到投稿页面查看,另外消极,异端,引起社会强烈反动的内容将作垃圾处理。情感、技术、正能量将被提拔",
 "有稿费吗?":"只要是首发并且优质的文章博主将会依据情况颁发支付宝奖金,所以还望投稿者在稿后注明支付宝账号",
 "什么是首发?":"为本人原创,并且在其他网站上未曾发布过"
 },
 "咨询":{
 "如何咨询到博主?":"在网站菜单栏下面或者页脚处均有博主的qq联系方式图标,点击即可进行对话",
 "什么时候可以咨询?":"时间不定,只要博主有空定会解答,对于一些简单的问题还望自己先思考下不懂再问",
 },
 "哈哈哈":{}
}

如上所示有9个question,如何进行关键词匹配技术呢?,用for循环遍历该对象,并把匹配到的question逐条插入到网页中,假如我们有个表单:

<form id="search" action="http://www.mizuiren.com" 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
转载请保留链接:前端搜索+高亮关键词 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/442.html
目录: 前端编程 | 标签: | 4887次阅读