搜索框智能提示ajax
2017-02-08 17:47
531 查看
基于ajax的搜索提示，如图所示，打下字母a弹出与之相关的关键词
设计思路是，从前台到后台。获得输入框的数据，采用ajax异步传输到后台，再用回调函数接收后台的反馈结果，再动态显示在前台页面
前台jsp页面代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>智能提示搜索框</title>
<style type="text/css">
#searchDiv{
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-50px;
}
#content_table{
background-color: "#FFFAFA"
border:0px;
cellspacing:0px;
cellpaddding:0px;
}
.mouseover{
background-color: #708090;
color:#FFFAFA;
}
.mouseout{
background-color:#FFFAFA;
color:000;
}
</style>
<script type="text/javascript">
var xmlHttp;
function keywordBlur(){
clearContent();
}
function keywordFocus(){
getMoreContents();
}
//设置内容区域的显示格式
function setLocation(){
var content = document.getElementById("keyword");
var width = content.offsetWidth;//输入框的宽度
var left = content["offsetLeft"];//到左边框的距离
var top = content["offsetTop"]+content.offsetHeight;//到顶部的距离
//获得显示数据的div
var popDiv = document.getElementById("popDiv");
popDiv.style.border = 1+"px";
popDiv.style.left = left+"px";
po
4000
pDiv.style.top = top+"px";
popDiv.style.width=width+"px";
document.getElementById("content_table").style.width=width+"px";
}
//获得用户输入内容的关联信息的函数
function getMoreContents(){
//获得用户输入内容
var content = document.getElementById("keyword");
if(content.value==""){
clearContent();
return;
}
//获得XmlHttp对象
xmlHttp = createXmlHttp();
//给服务器发送数据
var url = "SearchServlet?keyword="+escape(content.value);
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法，这个回调方法会在XmlHttp状态改变的时候调用
//XmlHttp的状态0-4，我们只关心完成状态因为当数据完成之后再调用回调方法才有意义
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
//创建XmlHttp对象
function createXmlHttp(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
//考虑浏览器兼容性
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp = new ActiveXObject("Msxml2.XNLHTTP");
}
}
return xmlHttp;
}
function callback(){
if(xmlHttp.readyState==4){
//200代表服务器响应成功
if(xmlHttp.status==200){
setLocation();
//交互成功。获得相应的数据，是文本格式
var result = xmlHttp.responseText;
//alert(result);
//解析获得的数据
var json = eval("("+result+")");
//获得数据之后展示数据
setContent(json);
}
}
}
//设置关联数据的显示
function setContent(contents){
clearContent();
var size = contents.length;
for(var i=0;i<size-1;i++){
var nextNode = contents[i];
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("border","0");
td.setAttribute("bgcolor","#FFFAFA");
td.onmouseover = function(){
this.className = 'mouseover';
};
td.onmouseout = function(){
this.className = 'mouseout';
};
td.onclick = function(){
};
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
function clearContent(){
var contentTableBody = document.getElementById("content_table_body");
var size = contentTableBody.childNodes.length;
for(var i=size-1;i>=0;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
}
</script>
</head>
<body>
<div id="searchDiv">
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="keywordFocus()"/>
<input type="button" value="百度一下" width="50px"/>
<!-- 内容展示区域 -->
<div id="popDiv">
<table id="content_table">
<tbody id = "content_table_body">
</tbody>
</table>
</div>
</div>
</body>
</html>
简单后台代码
package com.imooc.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
static List<String> datas = new ArrayList<String>();
static{
datas.add("ajax");
datas.add("asafx");
datas.add("aasdfx");
datas.add("ajwerwax");
}
/**
* @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 {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String keyword = request.getParameter("keyword");
List<String> listData = getData(keyword);
System.out.println(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
public List<String> getData(String keyword){
List<String> list = new ArrayList<String>();
for(String data:datas){
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
设计思路是，从前台到后台。获得输入框的数据，采用ajax异步传输到后台，再用回调函数接收后台的反馈结果，再动态显示在前台页面
前台jsp页面代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>智能提示搜索框</title>
<style type="text/css">
#searchDiv{
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-50px;
}
#content_table{
background-color: "#FFFAFA"
border:0px;
cellspacing:0px;
cellpaddding:0px;
}
.mouseover{
background-color: #708090;
color:#FFFAFA;
}
.mouseout{
background-color:#FFFAFA;
color:000;
}
</style>
<script type="text/javascript">
var xmlHttp;
function keywordBlur(){
clearContent();
}
function keywordFocus(){
getMoreContents();
}
//设置内容区域的显示格式
function setLocation(){
var content = document.getElementById("keyword");
var width = content.offsetWidth;//输入框的宽度
var left = content["offsetLeft"];//到左边框的距离
var top = content["offsetTop"]+content.offsetHeight;//到顶部的距离
//获得显示数据的div
var popDiv = document.getElementById("popDiv");
popDiv.style.border = 1+"px";
popDiv.style.left = left+"px";
po
4000
pDiv.style.top = top+"px";
popDiv.style.width=width+"px";
document.getElementById("content_table").style.width=width+"px";
}
//获得用户输入内容的关联信息的函数
function getMoreContents(){
//获得用户输入内容
var content = document.getElementById("keyword");
if(content.value==""){
clearContent();
return;
}
//获得XmlHttp对象
xmlHttp = createXmlHttp();
//给服务器发送数据
var url = "SearchServlet?keyword="+escape(content.value);
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法，这个回调方法会在XmlHttp状态改变的时候调用
//XmlHttp的状态0-4，我们只关心完成状态因为当数据完成之后再调用回调方法才有意义
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
//创建XmlHttp对象
function createXmlHttp(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
//考虑浏览器兼容性
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp = new ActiveXObject("Msxml2.XNLHTTP");
}
}
return xmlHttp;
}
function callback(){
if(xmlHttp.readyState==4){
//200代表服务器响应成功
if(xmlHttp.status==200){
setLocation();
//交互成功。获得相应的数据，是文本格式
var result = xmlHttp.responseText;
//alert(result);
//解析获得的数据
var json = eval("("+result+")");
//获得数据之后展示数据
setContent(json);
}
}
}
//设置关联数据的显示
function setContent(contents){
clearContent();
var size = contents.length;
for(var i=0;i<size-1;i++){
var nextNode = contents[i];
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("border","0");
td.setAttribute("bgcolor","#FFFAFA");
td.onmouseover = function(){
this.className = 'mouseover';
};
td.onmouseout = function(){
this.className = 'mouseout';
};
td.onclick = function(){
};
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
function clearContent(){
var contentTableBody = document.getElementById("content_table_body");
var size = contentTableBody.childNodes.length;
for(var i=size-1;i>=0;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
}
</script>
</head>
<body>
<div id="searchDiv">
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="keywordFocus()"/>
<input type="button" value="百度一下" width="50px"/>
<!-- 内容展示区域 -->
<div id="popDiv">
<table id="content_table">
<tbody id = "content_table_body">
</tbody>
</table>
</div>
</div>
</body>
</html>
简单后台代码
package com.imooc.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
@WebServlet("/SearchServlet")
public class SearchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
static List<String> datas = new ArrayList<String>();
static{
datas.add("ajax");
datas.add("asafx");
datas.add("aasdfx");
datas.add("ajwerwax");
}
/**
* @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 {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String keyword = request.getParameter("keyword");
List<String> listData = getData(keyword);
System.out.println(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
public List<String> getData(String keyword){
List<String> list = new ArrayList<String>();
for(String data:datas){
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Hibernate 一对一外键双向关联
- 给价格加.00
- android 禁掉唤醒锁acquire()
- Hibernate 多对多单向关联
- Android应用开发之所有动画使用详解
- 【记录】批处理实现dfs,bfs,双向bfs,A*寻路
- pyhon模块-1
- 关于 safari浏览器 不支持new Date 显示NaN的问题记录
- php gc
- csv格式文件生成实例
- 【死磕Java并发】-----深入分析volatile的实现原理
- 海量数据／日志检索问题
- strpos函数
- springboot(九)：定时任务
- java上传多张图片，并且可以删除上传的图片。
- android 资源文件处理工具
- Hibernate 多对一连接表单向关联
- zookeeper 启动命令
- jmeter进行分布式测试_使用其他机器进行测试
- 程序或-内存区域分配（五个段）