JAVA ajax搜索框_JS+Ajax实现百度智能搜索框

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

前端search.jsp

pageEncoding="UTF-8"%>

Insert title here

*{

margin: 0 auto;

padding: 0;

}

li{

margin:0;

height: 20px;

width: 200px;

list-style: none;

}

/* #c li:HOVER{

background-color: #F9F9F9;

} */

.onmouse{

background-color: #F9F9F9;

}

.outmouse{

background-color:white;

}

#contain{

width: 50%;

}

var xmlHttp;

function getMoreContents() {

var content=document.getElementById("keyword");

if(content.value==""){

ClearContent();

return;//如果不设置，传到后台的是空值，所有的值都会被输出

}

xmlHttp=creatXMLHttp();

//alert(xmlHttp);

//要给服务器发送数据

var url="searchServlet?keyword="+escape(content.value);

xmlHttp.open("GET",url,true);

xmlHttp.onreadystatechange=callback;

xmlHttp.send(null);

}

//获取XMLHttp对象

function creatXMLHttp() {

var xmlHttp;

if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();

}

if(window.ActiveXObject)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

if(!xmlHttp){

xmlHttp=new ActiveXOject("Msxml2.XMLHTTP");

}

}

return xmlHttp;

} //获取XMLHttp对象

function callback() {

if(xmlHttp.readyState==4 && xmlHttp.status==200){

var result=xmlHttp.responseText;

//解析数据

var json=eval("("+result+")");

//动态显示数据，线束数据在输入框对的下面

setContent(json);

}

}

//设置关联数据的展示

function setContent(contents) {

ClearContent();

var size=contents.length;

for(var i=0;i

{

var nextNode=contents[i];//json格式的第i个数据

var li =document.createElement("li");

li.οnmοuseοver=function(){

this.className="onmouse";

document.getElementById("keyword").value=this.innerHTML;

}

li.οnmοuseοut=function(){

this.className="outmouse";

}

var text=document.createTextNode(nextNode);

li.appendChild(text);

document.getElementById("c").appendChild(li);

}

}

//清空数据

function ClearContent() {

document.getElementById("c").innerHTML="";

}

//当控件失去焦点时，清空数据

function outFouce() {

ClearContent();

}

//获得焦点时，

后台searchServlet.Java

package search;

import java.io.IOException;

import java.util.ArrayList;

import java.util.List;

import net.sf.json.JSONArray;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

* Servlet implementation class searchServlet

*/

@WebServlet("/searchServlet")

public class searchServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

static List 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, HttpServletResponse response) throws ServletException, 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

目录结构

总结

以上所述是小编给大家介绍的JS+Ajax实现百度智能搜索框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！