频道导航

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

2019-01-01 Ajax 前端之家

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

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

前端search.jsp

Insert title here

百度一下" style="">

后台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; } }

xml配置

searchServlet

search.searchServlet

searchServlet

/search/searchServlet

DropMeum

index.html

index.htm

index.jsp

default.html

default.htm

default.jsp