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

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

2019-01-01

编程之家

https://www.jb51.cc

编程之家收集整理的这篇文章主要介绍了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);

Listlistdata= getData(keyword);

// 返回json,以流的形式写到前台

response.getWriter().write(JSONArray.fromObject(listdata).toString());

}

//获取假数据中符合条件的值

public ListgetData(String keyword)

{

Listlist=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

目录结构

总结

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

总结

以上是编程之家为你收集整理的JS+Ajax实现百度智能搜索框全部内容，希望文章能够帮你解决JS+Ajax实现百度智能搜索框所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。