java简单的实现搜索框的下拉显示相关搜索功能
2014-06-19 16:16
1031 查看
最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索
先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来
搜索框相关搜索的展示很简单,就是根据你的搜索词,去数据库中匹配,是否有类似的搜索词存在,按照搜索词被搜索的次数进行排序显示出来
我设计的是每次搜索一个词,提交之后都会去数据库进行查询,看是否存在这个搜索词的搜索,若存在,则对数据库中的这个搜索词对象进行次数加1,不存在,则创建这个新搜索词对象,保存在数据库中,定义搜索次数为1
每次提交搜索都会将搜索词进行保存或次数加1,方便下次显示相关搜索
还有就是页面上方法的监听,在什么时候会显示下拉框内容,什么时候会隐藏下拉框内容,我简单参考了下百度的设计,并用自己的方法实现,可能真实设计上会有出入。一开始,我设计的是onchange监听,但发现onchange只有在失去焦点并且改变内容才会触发,后来改为了onkeyup来监听搜索框的内容,即键盘释放后,去数据库查询得到相关的搜索词对象。
在js中通过ajax实现和后台的交互,得到查询出来的search对象
点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来
先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来
搜索框相关搜索的展示很简单,就是根据你的搜索词,去数据库中匹配,是否有类似的搜索词存在,按照搜索词被搜索的次数进行排序显示出来
我设计的是每次搜索一个词,提交之后都会去数据库进行查询,看是否存在这个搜索词的搜索,若存在,则对数据库中的这个搜索词对象进行次数加1,不存在,则创建这个新搜索词对象,保存在数据库中,定义搜索次数为1
每次提交搜索都会将搜索词进行保存或次数加1,方便下次显示相关搜索
public String soso(){ if(search!=null){ searchBiz.addSearch(search);//存储搜索对象或对搜索对象的搜索次数+1 } return "soso"; } public String getRelativeSearch() throws UnsupportedEncodingException{//根据搜索词内容得到相关的搜索对象 content = URLDecoder.decode(content,"utf-8");//url解码,将其还原成中文等内容 String ss = content.replaceAll("(?s)(.)(?=.*\\1)", "");//这个方法是网上查的,删除字符串里面重复出现的字符内容,我在这边设计,主要就是为了排除%的影响,会匹配到所有内容 if(content!=null&&!content.equals("")&&!ss.equals("%")){//即如果搜索词全部是由百分号组成,则去查询相关的搜索词 searchs = searchBiz.getRelativeSearch(content);//得到相关的搜索词对象,最多显示10个 } return "searchs"; }
还有就是页面上方法的监听,在什么时候会显示下拉框内容,什么时候会隐藏下拉框内容,我简单参考了下百度的设计,并用自己的方法实现,可能真实设计上会有出入。一开始,我设计的是onchange监听,但发现onchange只有在失去焦点并且改变内容才会触发,后来改为了onkeyup来监听搜索框的内容,即键盘释放后,去数据库查询得到相关的搜索词对象。
<body class="index"> <div class="searchbox "> <div class="search w652 center"> <form name="formsearch" method="post" action="<c:url value="/SearchAction_soso.action"/>"> <div class="form"> <div class="form_left"> <!-- 搜索框 --> <div class="form_right"> <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)" /> <button type="submit" class="search-submit" >搜索</button> </div> <!-- 下拉框 --> <ul id="hotwords" class="hotwords"> </ul> </div> </div> </form> </div> </div> </body>
在js中通过ajax实现和后台的交互,得到查询出来的search对象
relativeS:function(){ var input = document.getElementById("search-keyword"); var content = input.value; content= encodeURI(encodeURI(content));//URI编码转换 Ajax.sendRequest("post","url","content="+content,this.relativefun) }, relativefun:function(p){ var searchs = JSON.parse(p.text); var ul = document.getElementById("hotwords"); //得到相关搜索的搜索对象并进行操作,生成对象加载到页面中 if(searchs!=null&&searchs.length>0){ ul.style.display = "block"; $("#hotwords li").remove();//移除之前生成的li相关搜索 for(var i=0;i<searchs.length;i++){ var li = document.createElement("li"); li.innerHTML = searchs[i].content; li.onclick = function onclick(){ Search.choosecontent(this); } ul.appendChild(li); } }else{ ul.style.display = "none"; } }, choosecontent:function(e){ var input = document.getElementById("search-keyword"); var ul = document.getElementById("hotwords"); input.value = e.innerHTML; ul.style.display = "none"; }, //搜索框丢失焦点,下拉框也会消失 hiddenhot:function(){ var ul = document.getElementById("hotwords"); ul.style.display = "none"; }
点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来
相关文章推荐
- 前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
- 实现类似于百度实时搜索将结果在下拉框中显示的功能
- 简单实现Android搜索功能 显示清除历史搜索记录
- swift 搜索框(UISearchBar)实现简单的搜索功能(swift3)
- 如何实现简单的自动提示(autocomplete)填充搜索功能java代码。
- JavaScript简单实现关键字文本搜索高亮显示功能示例
- swift 搜索框(UISearchBar)实现简单的搜索功能
- 简单实现Android搜索功能 显示清除历史搜索记录
- JAVA SPRING MVC 实现一个简单的页面显示功能
- 磁盘搜索之Java简单实现
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnets 显示某个对象的评论列表的功能实现
- java实现简单留言板功能的代码实例
- Java动态显示文件上传进度的简单实现 - java2000.net的专栏 - CSDNBlog
- jQuery实现动态搜索显示功能
- Java动态显示文件上传进度的简单实现
- java 实现微信搜索附近人功能
- c语言,功能简单的电话簿,实现输入,显示,查找的功能
- C#+AE实现类似IDentify功能及对高亮显示相关接口的总结
- Java动态显示文件上传进度的简单实现
- java 使用正则Pattern等实现【搜索 -> 提取 -> 分割 -> 替换】功能