- 浏览: 6331 次
- 性别:
- 来自: 泉州
最新评论
-
fluotao:
楼主为毛的copy一直报Exception in thread ...
将CMYK彩色空间的图片转换为RGB彩色空间的图片 -
claye88:
Exception in thread "main& ...
将CMYK彩色空间的图片转换为RGB彩色空间的图片 -
duanxian:
不错,作为临时解决方案挺好。
将CMYK彩色空间的图片转换为RGB彩色空间的图片
ajax+jquery实现类似百度搜索提示框
需求:
1、 输入某一关键字后,在搜索框下会显示出与此关键字相关的提示信息
2、 可以通过键盘的上下键以及回车键进行操作
思路:
1、 输入关键字后,通过ajax异步的方式将关键字提交给相应的处理模块,获得处理结果(主要是通过查询数据库中某张表获得以此关键字开头的符合要求的数据),然后再加载到页面上。
2、 通过获取用户操作键盘的event.keyCode值来进行不同的操作。(up:38 down: 40 enter:13)
下面给出主要的代码:
页面html代码: <div class="searchformdiv"> <form id="searchform" action="<%=basePath%>web/search-list.shtml" onsubmit="return f_search()" target="_self"> <div><input type="text" id="keywords" class="inputtextsearch2" autocomplete="off" value="${pagerestrict.keywords}" /> <input type="image" src="<%=basePath%>web/imgs/button_searcha.png" align="absmiddle"> </div></form></div> <script> function f_search(){ var keywords = document.getElementById("keywords").value.Trim();//Trim()方法在String.perporty.Trim()中写了,剔除字符串前后的空格 if(keywords==null||keywords==''){ return false; } document.getElementById("searchform").action="<%=basePath%>web/search-list.shtml"; } </script> |
后台获取处理结果的部分代码(我是写在servlet中的): response.setContentType("text/xml;charset=utf-8");//设置返回信息的格式 request.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); String keywords = request.getParameter("key").replaceAll("<[/a-zA-Z]*>", "").replaceAll("[^a-zA-Z0-9_\u4e00-\u9fa5 ]*", ""); //剔除关键字中html标签以及非空格的特殊字符;这样做是为后面通过xml的形式返回数据做准备,因为在xml中出现< >这些符号的时候不好处理,所以为了简单点就在这给剔除了。O(∩_∩)O~ StringBuilder sql = new StringBuilder(); sql.append("select kw,totalcount, kwid from tproductkw where totalcount > 0 and ( kw like '").append(keywords).append("%' or sep like '").append(keywords).append("%' ) order by length(kw),searchtimes desc"); //用的mysql数据库 order by length(kw)是按照kw的长度进行排序,不知道其它数据库是否有这个方法,木有的话可以自己写个滴 StringBuilder xml = new StringBuilder();
//下面是通过查询数据库获取符合要求的信息的,我是通过hibernate来操作的,你也可以通过自己的方法来对数据库进行操作 PageRestrict res = new PageRestrict(); res.setLimit(15); List list = HibernateUtil.getListForPageBySql(sql.toString(), res).getDataList(); xml.append("<results>"); if(list != null){ for(Object item:list){ Object o[] = (Object[])item; String sug =o[0].toString().toLowerCase().replaceAll("<[/a-zA-Z]*>", "").replaceAll("[^a-zA-Z0-9_\u4e00-\u9fa5 ]*", ""); String count = o[1].toString(); int pos =sug.indexOf(keywords.toLowerCase());//提示信息中是否包含关键字信息(因为我的数据库表中存的关键字以及关键字全转拼音后的数据sep字段,所以在这里就有可能在源提示信息中不包含关键字) if(pos>-1){//提示内容包含关键字时 sug = sug.substring(pos+keywords.length()).toLowerCase(); xml.append("<result key='").append(keywords.toLowerCase()).append("' sug='").append(sug).append("'");//包含关键字时,将关键字的值赋给key,提示信息中剔除关键字后的值赋给sug }else{//提示内容不包含关键字时 xml.append("<result key='' sug='").append(sug).append("'"); } xml.append(" count ='").append(count).append("' ></result>"); } } xml.append("</results>"); out.print(xml.toString()); out.flush(); out.close(); |
下面给出js代码
var line = 0;//定义一个全局的line以用于记录当前显示的是哪一行 function replace(obj,src,str){//用str替换掉源(obj)中的src if(obj.indexOf(src)==-1)return obj; var array = obj.split(src); var result=""; for(var i=0;i<array.length;i++){ result +=array[i]; result+=str; } return result; }
var mychange = function () {//进行ajax请求以及显示提示信息 del();//如果存在提示框则移除 if ($("#keywords").val() == "")return; var top = $("#keywords").offset().top;//搜索框与页面顶部的距离 var left = $("#keywords").offset().left;//搜索框与页面左侧的距离
//构造信息提示的div var newDiv = $("<div/>").width($("#keywords").width() + 10).css("position", "absolute").css("backgroundColor", "white").css("left", left).css("top", top + $("#keywords").height() + 10).css("border", "1px solid #DFDFDF").attr("id", "newDiv"); var table = $("<table width='100%'/>").attr("cellpadding", "0").attr("cellspacing", "0");
$.post(basePath+"autocompleteServlet.select", {key:$("#keywords").val()}, function (xml) {//发送请求,并通过xml的格式返回处理信息 $(xml).find("results result").each(function () {//获取处理信息中所有的result节点 var key = $(this).attr("key");//result中的key属性 var sug = $(this).attr("sug");//result中的sug属性,记录提示信息 var count = $(this).attr("count");//result中的count属性,记录通过该关键字的最后一次查询所得的总数
var tr = $("<tr/>").css("cursor", "pointer").mouseout(function () {//鼠标移到提示信息上时的样式变换 $(this).css("backgroundColor", "white").css("color", "black"); }).mouseover(function () {//鼠标移出提示信息时的样式变换 $(this).css("backgroundColor", "#DFDFDF").css("color", "white"); }).click(function () {//点击提示信息 var html = $(this).find("td").eq(0).html();//获取提示信息中的有效值
//剔除提示信息中的<B><b>标签 html = replace(html,"<B>",""); html = replace(html,"</B>",""); html = replace(html,"<b>","");//firefox html = replace(html,"</b>","");//firfox
$("#keywords").val(html);//将提示信息赋给搜索框 del();//移除提示框 $("#searchform").submit();//表单提交 }); //提示信息中的有效值,将非关键字部分加粗显示 var td1 = $("<td/>").html(key+"<b>"+sug+"</b>").css("fontSize", "14px").css("color", "black").css("margin", "5 5 5 5").css("padding","0 5px"); var td2 = $("<td/>").html("约"+count+"条结果").attr("align", "right").css("fontSize", "13px").css("color", "green").css("margin", "5 5 5 5"); tr.append(td1).append(td2); table.append(tr); newDiv.append(table);
}); if($(xml).find("results result").length==0){//没有提示结果时 del();//移除提示框 } });
$(document.body).append(newDiv);//显示提示框
if ($("#keywords").val() == "") { $("#newDiv").remove(); } }
function del() {//如果存在提示框则移除 if ($("#newDiv")) { $("#newDiv").remove(); line = 0;
} }
var keywords = "";//用于记录用户输入的关键字,因为在上下键操作的过程中会改变搜索框的值,用户在通过键盘上下键操作时应该还可以返回到他最初的状态 $(document).ready(function () {
//提示框失去焦点时层消失 $(document.body).click(function () { del(); }); $(document).keyup(function(event){//用户通过键盘进行操作,按键弹起时 $("#keywords").bind("propertychange", mychange);//将mychange事件绑定到propertychange事件上 $("#keywords").bind("input", mychange);//firefox 与上面的效果类似,只是在firefox中是input事件 if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){//当用户不是在按上下与回车键时,将搜索框中的值赋给keywords,记录用户的初始状态 keywords = $("#keywords").val(); } }); $(document).keydown(function (event) { // 38 上 40下 13 回车
if ($("#newDiv")) {//当提示框存在时
if (event.keyCode == 40) {//down $("#keywords").unbind("propertychange");//移除propertychange事件 $("#keywords").unbind("input");//firefox 与上面类似 var html = ""; if(line==$("#newDiv table tbody tr").length){//如果line值为当前提示信息行数的值时,将用户最初输入的信息赋给搜索框 html = keywords; $("#newDiv table tbody tr").eq($("#newDiv table tbody tr").length-1).css("backgroundColor", "white").css("color", "black");//消除选中样式 }else{//当有提示信息行选中时 $("#newDiv table tbody tr").eq(line).css("backgroundColor", "#DFDFDF").css("color", "white");//改变样式 html = $("#newDiv table tbody tr").eq(line).find("td").eq(0).html();//获取有效提示信息 html = replace(html,"<B>",""); html = replace(html,"</B>",""); html = replace(html,"<b>","");//firefox html = replace(html,"</b>","");//firfox if( $("#newDiv table tbody tr").length != 1){//改变样式 $("#newDiv table tbody tr").eq(line < 0 ? 0 : line - 1).css("backgroundColor", "white").css("color", "black"); } } line = (line == $("#newDiv table tbody tr").length ? 0 : line + 1);//line值不为提示信息行数的值时line值加1,否则line归0 $("#keywords").val(html);//将结果赋给搜索框
} else { if (event.keyCode == 38) {//up $("#keywords").unbind("propertychange"); $("#keywords").unbind("input");//firefox var html = ""; line = (line == 0 ? $("#newDiv table tbody tr").length : line-1 ); if(line == 0){ html = keywords; $("#newDiv table tbody tr").eq(0).css("backgroundColor", "white").css("color", "black"); }else{
$("#newDiv table tbody tr").eq(line-1).css("backgroundColor", "#DFDFDF").css("color", "white"); $("#newDiv table tbody tr").eq(line > $("table tbody tr").length? 0 : line ).css("backgroundColor", "white").css("color", "black"); html = $("#newDiv table tbody tr").eq(line-1).find("td").eq(0).html(); html = replace(html,"<B>",""); html = replace(html,"</B>",""); html = replace(html,"<b>","");//firefox html = replace(html,"</b>","");//firfox }
$("#keywords").val(html); } else { if (event.keyCode == 13) {//enter if($("#newDiv table tbody tr")&& $("#newDiv table tbody tr").length>0){//有提示信息时 var html = ""; if(line==0){//当line=0时 if($("#newDiv table tbody tr").eq(0).css("backgroundColor")=="#DFDFDF"){//第一行被选中 html =$("#newDiv table tbody tr").eq(0).find("td").eq(0).html(); }else{//没有进行选择时 return; } }else{ html = $("#newDiv table tbody tr").eq(line - 1).find("td").eq(0).html(); } html = replace(html,"<B>",""); html = replace(html,"</B>",""); html = replace(html,"<b>","");//firefox html = replace(html,"</b>","");//firfox $("#keywords").unbind("propertychange");//移除propertychange事件 $("#keywords").unbind("input");//firefox 与上面的操作类似 $("#keywords").val(html); } del();//移除提示框 } } } } }); $("#keywords").bind("propertychange", mychange);//ie 将mychange绑定到propertychange事件上 $("#keywords").bind("input", mychange);//firefox 与上面类似 });
|
上面就是主要的代码了,其中就是在用户操作键盘的时候对mychang方法的绑定与移除,还有记录用户最初输入的数据信息这些地方要稍稍注意一下。
搜索框中的autocomplete="off"一定要加上,否则在某些浏览器中你的自动提示功能将不能实现的哦
可能上面的代码有一些不足之处,还请给位点评O(∩_∩)O~
- ajax_jquery实现类似百度搜索提示框.zip (19 KB)
- 下载次数: 92
相关推荐
总的来说,这个项目结合了Ajax、jQuery和C#,利用Microsoft Visual Studio 2008作为开发工具,实现了类似谷歌和百度搜索框的下拉提示功能。通过Ajax技术,用户在输入搜索词时可以实时看到匹配的搜索建议,提升了用户...
### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中,提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...
"php+jquery仿百度搜索提示框autoComplete"是一个示例项目,它利用PHP和jQuery技术实现了类似百度搜索引擎的自动补全功能。这个功能允许用户在输入关键词时,系统会实时地根据已有的数据提供匹配的建议,从而加速...
例如,你可以使用Bootstrap的`table`类来展示新闻列表,`form`类构建数据输入表单,以及`modal`组件用于弹出确认或提示框。 **jQuery**: jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理、动画效果和...
【标题】"jsp智能提示完整版,jquery+ajax+text实现"揭示了这是一个关于Web开发的项目,主要涉及的技术栈是JavaServer Pages (JSP)、jQuery、Ajax以及文本处理。这个项目意在模仿百度的智能提示功能,即在用户输入时...
本文将围绕SSH2框架、Ajax、jQuery和JSON这些技术展开讨论,并结合给定的部分内容来深入分析如何利用这些技术进行用户名验证。 ### SSH2框架 SSH2框架是指Spring、Struts2和Hibernate三个开源框架的集成应用,它们...
SSH+Ajax+jQuery是Web开发中的一个组合,用于构建交互性强、用户体验良好的应用程序。SSH代表Spring、Struts和Hibernate三个框架,它们分别是Java Web开发中的持久层、控制层和业务层解决方案。Ajax(异步JavaScript...
这个项目“用php+ajax写的仿百度谷歌搜索下拉自动提示框效果”旨在实现类似百度和谷歌搜索引擎的实时搜索建议功能。下面我们将详细探讨这个过程涉及的关键知识点。 首先,我们要理解**PHP**(Hypertext ...
本项目利用了ajax和jquery技术来实现这一功能,结合后端语言Java以及数据库MySQL,为用户提供了一种高效且灵活的图片展示解决方案。 【描述】: 这个项目是基于Java开发的,使用Eclipse作为集成开发环境,它实现了...
在本教程中,我们将探讨如何使用Asp.Net后端配合jQuery和Ajax技术来实现类似百度搜索栏的自动填充功能。 首先,我们需要了解基础概念: 1. **Ajax(Asynchronous JavaScript and XML)**:异步JavaScript和XML,是...
本项目"AJAX百度搜索自动提示效果+JQuery滑动效果"结合了这两者的优势,为用户提供了类似百度搜索那样的实时自动提示功能,并辅以jQuery的平滑滑动效果,让网页界面更加生动且易用。 首先,我们来详细探讨AJAX技术...
本示例中的"文字过滤(ajax+jquery+servlet)"项目,就是利用Ajax、jQuery和Servlet来实现这样一个功能,它能在用户提交评论前自动检查并替换特定文字,例如将“人”字换成“我”。 **Ajax技术** Ajax...
### Struts2 + jQuery + JSON 实现Ajax 在现代Web开发中,Ajax技术因其能够实现网页的局部刷新而被广泛采用。本篇文章介绍如何利用Struts2框架结合jQuery与JSON来构建一个简单的Ajax功能。 #### 一、环境搭建 1. ...
4. **搜索提示框实现**: - 使用HTML和CSS创建一个动态显示的提示列表,初始时隐藏,当有Ajax请求返回时显示。 - 通过JavaScript动态添加列表项,每个项显示一个搜索建议,可以包括匹配的关键词及其相关上下文。 ...
本篇主要介绍如何使用Ajax、jQuery和ASP.NET来实现输入框内数据的分页功能。 首先,我们需要理解Ajax(Asynchronous JavaScript and XML)的核心理念,即异步的JavaScript和XML。在网页中,Ajax允许部分页面内容的...
项目完成后,用户可以在浏览器中看到一个带有搜索、排序功能的表格,通过jQuery实现的增删改查按钮,可以无刷新地对数据进行操作,同时Bootstrap的反馈提示和验证也能提升用户体验。 总的来说,这个项目是一个典型...
在这个登录系统中,Jquery EasyUI可能被用来创建登录表单的样式和交互效果,如按钮点击后的动画效果、表单验证提示等。它的使用可以使界面更加美观且易于操作。 在`EntThink`这个文件名中,我们可以推测这可能是...
"JAVA___jQuery+AJAX_仿百度搜索功能" 这个标题指出我们要探讨的是一个基于Java、jQuery和AJAX技术实现的项目,目标是模仿百度搜索引擎的实时搜索功能。在这个项目中,用户输入关键词时,将通过AJAX异步请求发送到...
在现代Web应用中,"servlet+ajax实现搜索框智能提示"是一个常见的功能,它能够极大地提升用户体验。这个功能使得用户在输入搜索关键词时,无需完整输入就能得到相关的搜索建议,这种实时反馈的方式大大减少了用户的...