首先浏览实现后的结果,输入一个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实现百度智能搜索框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!