这次给大家带来Ajax怎么做出智能搜索框的提示功能，Ajax做出智能搜索框提示功能的注意事项有哪些，下面就是实战案例，一起来看一下。
利用无刷新技术智能变换搜索框的提示，同百度搜索
效果图
其基本原理：
1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)
2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框下方的展示窗
如下为支持json的jar包
search.jsp
ajax搜索 //获得更多关联信息的函数function getMore(){ var xmlHttp; //首先获得用户的输入 var content = document.getElementById("keyword"); if(content.value==""){ keywordBlur();//执行一下清空方法，使搜索框在无数据的时候，下方残留数据也动态清空 return; } //alert(content.value); //要给服务器发送用户输入的内容，要创建对象,叫XmlHttp对象 //xmlHttp=获得XmlHttp对象 xmlHttp=CreatXMLHttp(); //alert(xmlHttp); //要给服务器发送数据 var url="serch?keyword="+escape(content.value); //如果不用escape这个函数转化一下的话，传中文会有问题 //true表示javascript的脚本会在send()方法之后继续执行，而不会等待来自服务器的相应 xmlHttp.open("GET",url,true); //xmlHttp绑定一个回调方法去接受服务器传来的相应,会在xmlHttp状态改变的时候被调用 //xmlHttp有0~4的状态，只关心4的方法 //4为complete状态，表示交互完成，当交互完成时才会调用回调方法 xmlHttp.onreadystatechange=callback; xmlHttp.send(null);//send里面发送的是内容体，但参数在URL里已经都写完了 //回调函数==!!注意 这里回调方法要在方法内创建，因为创建的xmlHttp对象不是全局变量 //是在getMore()方法里创建的，可以将变量提取出来，变成全局变量 function callback(){ if (xmlHttp.readyState==4){ //200代表服务器相应成功。。。404代表资源未找到。。500服务器内部错误 if(xmlHttp.status==200){ //交互成功，获得相应的数据，是文本格式 var result=xmlHttp.responseText; //解析json格式 var json=eval("("+result+")");//要在两边加个小括号，js才能认识 //获得数据之后就可以开始展示了。在输入框的下边展示 setContent(json); } } } //设置关联数据展示,参数代表的是服务器传递过来的关联数据 function setContent(contents){ //setLocation();//设置跟输入框一样宽度 keywordBlur();//在每次得到值之前先清空一下之前的残留数据 var size=contents.length;//根据关联的数据长度，来生成多少 //设置内容 for(var i=0;i=0;i--){ contentTableBody.removeChild(contentTableBody.childNodes[i]); } document.getElementById("popp").style.border="none"; }/* #myp{ position: absolute; left:30%; top:50%; margin-left: 100px;} */.mouseOver{ background: #708090; color: #FFFAFA;}.mouseOut{ background: #FFFAFA; color: #000000;}
<!-- -->
| ajax1 |
| ajax2 |
| ajax3 |
登录后复制
SearchServlet.class
package com.ninka;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;public class SearchServlet extends HttpServlet{ static List datas = new ArrayList(); static{ datas.add("ajax1"); datas.add("ajax2"); datas.add("ajax3"); datas.add("bichi1"); datas.add("bichi2"); datas.add("php"); datas.add("javascript"); datas.add("java"); datas.add("html"); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置下编码格式 request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); System.out.println("123"); //首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对，否则会空指针异常 String keyword = request.getParameter("keyword"); //获得关键字之后进行处理，得到关联数据 List listData = getData(keyword); //返回json格式 System.out.println(JSONArray.fromObject(listData)); //JSONArray.fromObject(listData); response.getWriter().write(JSONArray.fromObject(listData).toString()); } //获得关联数据方法 public List getData(String keyword){ List list = new ArrayList(); for(String data:datas){ //如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成list，向客户端传 if(data.contains(keyword)){ list.add(data); } } return list; }}
登录后复制
web.xml
ajaxtest search.jsp search com.ninka.SearchServlet search /
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
ajax的校验功能怎样用SSM整合框架实现
PHP+Ajax如何实现表格的实时编辑
以上就是Ajax怎么做出智能搜索框的提示功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2776567.html
