首页 > 代码库 > java简单的实现搜索框的下拉显示相关搜索功能

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

2024-07-08 21:13:45   226人阅读

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

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

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

我设计的是每次搜索一个词，提交之后都会去数据库进行查询，看是否存在这个搜索词的搜索，若存在，则对数据库中的这个搜索词对象进行次数加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="http://www.mamicode.com//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=http://www.mamicode.com/=‘输入搜索关键词，回车搜索‘){this.value=‘‘;};Search.relativeS()"  onblur="if(this.value=http://www.mamicode.com/=‘‘){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 =http://www.mamicode.com/ e.innerHTML;31         ul.style.display = "none";32     },33     //搜索框丢失焦点，下拉框也会消失34     hiddenhot:function(){35         var ul = document.getElementById("hotwords");36         ul.style.display = "none";37     }

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


联系
我们