JS+Ajax实现百度智能搜索框

前端之家收集整理的这篇文章主要介绍了JS+Ajax实现百度智能搜索框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值。实现所需要的主要是ajax+js。

前端search.jsp

Insert title here
百度一下" style="">
@H_403_27@

后台searchServlet.Java

datas=new ArrayList(); static {//假数据,模拟数据库读取 datas.add("ajax"); datas.add("bjax"); datas.add("ajaxfd"); datas.add("bfvd"); datas.add("dafdx"); datas.add("fdax"); datas.add("ahg"); datas.add("ddx"); } /** * @see HttpServlet#HttpServlet() */ public searchServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response) */ protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException { // TODO Auto-generated method stub doPost(request,response); } /** * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response) */ protected void doPost(HttpServletRequest request,IOException { // TODO Auto-generated method stub request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String keyword=request.getParameter("keyword"); //System.out.println(keyword); List listdata= getData(keyword); // 返回json,以流的形式写到前台 response.getWriter().write(JSONArray.fromObject(listdata).toString()); } //获取假数据中符合条件的值 public List getData(String keyword) { List list=new ArrayList(); for(String data:datas) { if(data.contains(keyword)){ list.add(data); } } return list; } } @H_403_27@

xml配置

searchServlet search.searchServlet searchServlet /search/searchServlet DropMeum index.html index.htm index.jsp default.html default.htm default.jsp @H_403_27@

目录结构

总结

以上所述是小编给大家介绍的JS+Ajax实现百度智能搜索框。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/ajax/37368.html

猜你在找的Ajax相关文章