首页 > 编程语言 > 详细

java简单的实现搜索框的下拉显示相关搜索功能

时间:2014-06-28 19:35:22      阅读:617      评论:0      收藏:0      [点我收藏+]

最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索

  先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来

bubuko.com,布布扣

  搜索框相关搜索的展示很简单,就是根据你的搜索词,去数据库中匹配,是否有类似的搜索词存在,按照搜索词被搜索的次数进行排序显示出来

我设计的是每次搜索一个词,提交之后都会去数据库进行查询,看是否存在这个搜索词的搜索,若存在,则对数据库中的这个搜索词对象进行次数加1,不存在,则创建这个新搜索词对象,保存在数据库中,定义搜索次数为1

  每次提交搜索都会将搜索词进行保存或次数加1,方便下次显示相关搜索

 1 public String soso(){
 2         if(search!=null){
 3             searchBiz.addSearch(search);//存储搜索对象或对搜索对象的搜索次数+1
 4         }
 5         return "soso";
 6     }
 7     public String getRelativeSearch() throws UnsupportedEncodingException{//根据搜索词内容得到相关的搜索对象
 8         content = URLDecoder.decode(content,"utf-8");//url解码,将其还原成中文等内容
 9         String ss = content.replaceAll("(?s)(.)(?=.*\\1)", "");//这个方法是网上查的,删除字符串里面重复出现的字符内容,我在这边设计,主要就是为了排除%的影响,会匹配到所有内容
10         if(content!=null&&!content.equals("")&&!ss.equals("%")){//即如果搜索词全部是由百分号组成,则去查询相关的搜索词
11             searchs = searchBiz.getRelativeSearch(content);//得到相关的搜索词对象,最多显示10个
12         }
13         return "searchs";
14     }

  还有就是页面上方法的监听,在什么时候会显示下拉框内容,什么时候会隐藏下拉框内容,我简单参考了下百度的设计,并用自己的方法实现,可能真实设计上会有出入。一开始,我设计的是onchange监听,但发现onchange只有在失去焦点并且改变内容才会触发,后来改为了onkeyup来监听搜索框的内容,即键盘释放后,去数据库查询得到相关的搜索词对象。

 1 <body class="index">
 2     <div class="searchbox ">
 3         <div class="search w652 center">
 4           <form  name="formsearch" method="post" action="<c:url value="/SearchAction_soso.action"/>">
 5             <div class="form">
 6                 <div class="form_left">
 7                     <!-- 搜索框 -->
 8                     <div class="form_right">
 9                       <input onkeyup="Search.relativeS()" autocomplete="off" name="search.content" type="text" class="search-keyword" id="search-keyword" value="输入搜索关键词,回车搜索" onfocus="if(this.value==‘输入搜索关键词,回车搜索‘){this.value=‘‘;};Search.relativeS()"  onblur="if(this.value==‘‘){this.value=‘输入搜索关键词,回车搜索‘};setTimeout(Search.hiddenhot,100)" />
10                       <button type="submit" class="search-submit" >搜索</button>
11                     </div>
12                     <!-- 下拉框 -->
13                     <ul id="hotwords" class="hotwords">
14                         
15                     </ul>
16                 </div>
17             </div>
18           </form>
19            </div>
20     </div>
21   </body>

  在js中通过ajax实现和后台的交互,得到查询出来的search对象

 1 relativeS:function(){
 2         var input = document.getElementById("search-keyword");
 3         var content = input.value;
 4         content= encodeURI(encodeURI(content));//URI编码转换
 5         Ajax.sendRequest("post","url","content="+content,this.relativefun)
 6     },
 7     relativefun:function(p){
 8         var searchs = JSON.parse(p.text);
 9         var ul = document.getElementById("hotwords");
10         //得到相关搜索的搜索对象并进行操作,生成对象加载到页面中
11         if(searchs!=null&&searchs.length>0){
12             ul.style.display = "block";
13             $("#hotwords li").remove();//移除之前生成的li相关搜索
14             for(var i=0;i<searchs.length;i++){
15                 var li = document.createElement("li");
16                 
17                 li.innerHTML = searchs[i].content;
18                 li.onclick = function onclick(){
19                     Search.choosecontent(this);
20                 }
21                 ul.appendChild(li);
22             }
23         }else{
24             ul.style.display = "none";
25         }
26     },
27     choosecontent:function(e){
28         var input = document.getElementById("search-keyword");
29         var ul = document.getElementById("hotwords");
30         input.value = e.innerHTML;
31         ul.style.display = "none";
32     },
33     //搜索框丢失焦点,下拉框也会消失
34     hiddenhot:function(){
35         var ul = document.getElementById("hotwords");
36         ul.style.display = "none";
37     }

  点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来

java简单的实现搜索框的下拉显示相关搜索功能,布布扣,bubuko.com

java简单的实现搜索框的下拉显示相关搜索功能

原文:http://www.cnblogs.com/x-h-s/p/3796900.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!