JS、AJAX等实现：HTML/JSP页面中即时显示查询的数据，怎么写？
比如在查询框中输入“你好”，那么在数据库或table或div数据中含有“你好”这两个字的数据都列出来，模糊查询，不用点击查询按钮，你每输入一个字就马上列出符合条件的，怎么...
比如在查询框中输入“你好”，那么在数据库或table或div数据中含有“你好”这两个字的数据都列出来，模糊查询，不用点击查询按钮，你每输入一个字就马上列出符合条件的，怎么做？谢谢
展开
3个回答
展开全部
struts2 action 代码import java.io.IOException;
import java.io.PrintWriter;public class AutoComplete extends CommonAction { /**
* 用于实践ajax google 的样式
* 用于接收服务器端请求的
*/
//抓取从页面穿过来的字符串 用于和服务器端的单词进行匹配
private String word ;
public AutoComplete() {
} public String onblurquery() throws Exception{
//保存要查询的东西
//注意ajax 中 这个所谓的视图层不返回页面 只返回数据
this.getRequestMap().put("word", word);
//System.out.println("struts - > "+word);
this.getResponse().setContentType("text/xml;charset=gb2312;");
return "toshow";
}
public String getWord() {
return word;
} public void setWord(String word) {
this.word = word;
}}jsp 代码<%@ page contentType="text/html; charset=gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google</title>
<meta http-equiv="description" content="This is my page">
<style type="text/css">
/*当文本没有被选中的时候就使用这个样式*/
.auto-1{
background-color: #FFCC99;
color: gray;
cursor: pointer;
width: 100%;
}
/*当文本被选中的时候就是用这个样式*/
.auto-2{
background-color: #CCFF99;
color: green;
cursor: pointer;
width: 100%;
}
</style>
<script type="text/javascript" src="employees/jquery.js"></script>
<script type="text/javascript" src="employees/auto.js"></script>
</head>
<body>
google:
<input type="text" id="word">
<input type="button" value="查询" id="chk"><br>
<div id="auto"></div>
</body>
</html>jquery 代码 //表示当前被选中的节点
var highlightindex = -1;
var timeoutId;
$(document).ready(function (){
//alert("准备好了");
//保存文本输入框
var wordinput=$("#word");
//保存文本的
var wordinputOffset = wordinput.offset();
//弹出框应该等于在文本的下面 那么就是文本的宽等于div的宽
$("#auto").hide().css("border","1px solid #CDD2CB").css("position","absolute")
.css("top",wordinputOffset.top+wordinput.height()+5+"px").css("left",wordinputOffset.left+"px").width(wordinput.width()+40+"px");
//给文本框添加键盘按下并谈起的实践
$("#word").keyup(function (event){
//处理键盘实践
var myEvent = event || window.event;
//如果输入的是字母 应该是将文本中最新的信息发送到服务器
//如果是退格或是删除键 那么就将文本中最新的信息发送给服务器
var keyCode = myEvent.keyCode;
if(keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46){
//1 得到文本框中的内容
var wordtext = $("#word").val();
if(wordtext!=""){
//2 把这的信息网服务器中发送
window.clearTimeout(timeoutId);
//对发送到服务器进行交互延迟500毫秒 比秒打字太快了 没有抓取到
timeoutId = window.setTimeout(function (){
//第一个参数 请求的地址 第二个参数 传递的参数 第三个参数 回调函数 第四个参数 数据回传的数据类型
$.post("auto_onblurquery.aiyu",{word:wordtext},function(data){
// 将dom对象data 转化成JQuery 对象昂
//alert(data);
var jqueryObj = $(data);
//alert(data);
// 到xml 中找到所有的woerd节点
var wordNode = jqueryObj.find("word");
//alert(wordNode);
var autoNode = $("#auto");
autoNode.html("");
// 遍历 所有恶woed 节点 取出 单词
wordNode.each(function (i){
//获取单词的内容
var wordN = $(this);
// 新建div节点 将单词放进去
//alert(wordN.text());
//将div节点加入到弹出框汇总
var newdivNode = $("<div>").attr("id",i);
newdivNode.addClass("auto-1").html(wordN.text()).appendTo(autoNode);
//给鼠标加入进入的时候就高亮
newdivNode.mouseover(function (){
if(highlightindex!=-1){
$("#auto").children("div").eq(highlightindex).removeClass("auto-2").addClass("auto-1");
}
highlightindex = $(this).attr("id");
$(this).removeClass("auto-1").addClass("auto-2");
});
//鼠标移出的加上的样式
newdivNode.mouseout(function (){
$(this).removeClass("auto-2").addClass("auto-1");
});
//鼠标点击的时候增加的样式
newdivNode.click(function (){
//取出文本的内容
var comtext = $(this).text();
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
$("#word").val(comtext);
});
});
if(wordNode.length>0){
if($("#word").val()==""){
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
}else{
$("#auto").show();
}
}else{
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
}
//alert(data);
},"xml");
},500);
}else{
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
}
}else if(keyCode == 38 || keyCode == 40){
//如果是按得向上或是向下键
if(keyCode == 38){
//上
var autoNodes = $("#auto").children("div");
if(highlightindex!=-1){
autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
highlightindex--;
}else{
highlightindex = autoNodes.length-1;
}
if(highlightindex==-1){
//如果修改过后的索引为-1 则索引到最后的节点
highlightindex = autoNodes.length-1;
}
autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
}
if(keyCode == 40){
//下
var autoNodes = $("#auto").children("div");
if(highlightindex!=-1){
autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
}
highlightindex++;
if(highlightindex>=autoNodes.length){
highlightindex=0;
}
if(highlightindex==-1){
//如果修改过后的索引为-1 则索引到最后的节点
highlightindex = 0;
}
autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
}
}else if(keyCode == 13){
//按下的回车
//下拉框中被选中有选中的东西
if(highlightindex!=-1){
//取出文本的内容
var comtext = $("#auto").children("div").eq(highlightindex).text();
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
$("#word").val(comtext);
}else{
//下拉框中没有选中的东西
alert("文本框的["+$("#word").val()+"]被提交了");
$("#auto").hide();
$("#word").blur();
}
}
});
$("input[id='chk']").click(function (){
alert("文本框的["+$("#word").val()+"]被提交了");
});
}); 最后返回xml 的代码<%@ page contentType="text/xml; charset=gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<words>
<s:if test="%{'absolute'.startsWith(#request.word)}">
<word>absolute</word>
</s:if>
<s:if test="%{'anyone'.startsWith(#request.word)}">
<word>anyone</word>
</s:if>
<s:if test="%{'anything'.startsWith(#request.word)}">
<word>anything</word>
</s:if>
<s:if test="%{'apple'.startsWith(#request.word)}">
<word>apple</word>
</s:if>
<s:if test="%{'break'.startsWith(#request.word)}">
<word>break</word>
</s:if>
<s:if test="%{'boolean'.startsWith(#request.word)}">
<word>boolean</word>
</s:if>
<s:if test="%{'breach'.startsWith(#request.word)}">
<word>breach</word>
</s:if>
</words>
import java.io.PrintWriter;public class AutoComplete extends CommonAction { /**
* 用于实践ajax google 的样式
* 用于接收服务器端请求的
*/
//抓取从页面穿过来的字符串 用于和服务器端的单词进行匹配
private String word ;
public AutoComplete() {
} public String onblurquery() throws Exception{
//保存要查询的东西
//注意ajax 中 这个所谓的视图层不返回页面 只返回数据
this.getRequestMap().put("word", word);
//System.out.println("struts - > "+word);
this.getResponse().setContentType("text/xml;charset=gb2312;");
return "toshow";
}
public String getWord() {
return word;
} public void setWord(String word) {
this.word = word;
}}jsp 代码<%@ page contentType="text/html; charset=gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google</title>
<meta http-equiv="description" content="This is my page">
<style type="text/css">
/*当文本没有被选中的时候就使用这个样式*/
.auto-1{
background-color: #FFCC99;
color: gray;
cursor: pointer;
width: 100%;
}
/*当文本被选中的时候就是用这个样式*/
.auto-2{
background-color: #CCFF99;
color: green;
cursor: pointer;
width: 100%;
}
</style>
<script type="text/javascript" src="employees/jquery.js"></script>
<script type="text/javascript" src="employees/auto.js"></script>
</head>
<body>
google:
<input type="text" id="word">
<input type="button" value="查询" id="chk"><br>
<div id="auto"></div>
</body>
</html>jquery 代码 //表示当前被选中的节点
var highlightindex = -1;
var timeoutId;
$(document).ready(function (){
//alert("准备好了");
//保存文本输入框
var wordinput=$("#word");
//保存文本的
var wordinputOffset = wordinput.offset();
//弹出框应该等于在文本的下面 那么就是文本的宽等于div的宽
$("#auto").hide().css("border","1px solid #CDD2CB").css("position","absolute")
.css("top",wordinputOffset.top+wordinput.height()+5+"px").css("left",wordinputOffset.left+"px").width(wordinput.width()+40+"px");
//给文本框添加键盘按下并谈起的实践
$("#word").keyup(function (event){
//处理键盘实践
var myEvent = event || window.event;
//如果输入的是字母 应该是将文本中最新的信息发送到服务器
//如果是退格或是删除键 那么就将文本中最新的信息发送给服务器
var keyCode = myEvent.keyCode;
if(keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46){
//1 得到文本框中的内容
var wordtext = $("#word").val();
if(wordtext!=""){
//2 把这的信息网服务器中发送
window.clearTimeout(timeoutId);
//对发送到服务器进行交互延迟500毫秒 比秒打字太快了 没有抓取到
timeoutId = window.setTimeout(function (){
//第一个参数 请求的地址 第二个参数 传递的参数 第三个参数 回调函数 第四个参数 数据回传的数据类型
$.post("auto_onblurquery.aiyu",{word:wordtext},function(data){
// 将dom对象data 转化成JQuery 对象昂
//alert(data);
var jqueryObj = $(data);
//alert(data);
// 到xml 中找到所有的woerd节点
var wordNode = jqueryObj.find("word");
//alert(wordNode);
var autoNode = $("#auto");
autoNode.html("");
// 遍历 所有恶woed 节点 取出 单词
wordNode.each(function (i){
//获取单词的内容
var wordN = $(this);
// 新建div节点 将单词放进去
//alert(wordN.text());
//将div节点加入到弹出框汇总
var newdivNode = $("<div>").attr("id",i);
newdivNode.addClass("auto-1").html(wordN.text()).appendTo(autoNode);
//给鼠标加入进入的时候就高亮
newdivNode.mouseover(function (){
if(highlightindex!=-1){
$("#auto").children("div").eq(highlightindex).removeClass("auto-2").addClass("auto-1");
}
highlightindex = $(this).attr("id");
$(this).removeClass("auto-1").addClass("auto-2");
});
//鼠标移出的加上的样式
newdivNode.mouseout(function (){
$(this).removeClass("auto-2").addClass("auto-1");
});
//鼠标点击的时候增加的样式
newdivNode.click(function (){
//取出文本的内容
var comtext = $(this).text();
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
$("#word").val(comtext);
});
});
if(wordNode.length>0){
if($("#word").val()==""){
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
}else{
$("#auto").show();
}
}else{
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
}
//alert(data);
},"xml");
},500);
}else{
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
}
}else if(keyCode == 38 || keyCode == 40){
//如果是按得向上或是向下键
if(keyCode == 38){
//上
var autoNodes = $("#auto").children("div");
if(highlightindex!=-1){
autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
highlightindex--;
}else{
highlightindex = autoNodes.length-1;
}
if(highlightindex==-1){
//如果修改过后的索引为-1 则索引到最后的节点
highlightindex = autoNodes.length-1;
}
autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
}
if(keyCode == 40){
//下
var autoNodes = $("#auto").children("div");
if(highlightindex!=-1){
autoNodes.eq(highlightindex).removeClass("auto-2").addClass("auto-1");
}
highlightindex++;
if(highlightindex>=autoNodes.length){
highlightindex=0;
}
if(highlightindex==-1){
//如果修改过后的索引为-1 则索引到最后的节点
highlightindex = 0;
}
autoNodes.eq(highlightindex).removeClass("auto-1").addClass("auto-2");
}
}else if(keyCode == 13){
//按下的回车
//下拉框中被选中有选中的东西
if(highlightindex!=-1){
//取出文本的内容
var comtext = $("#auto").children("div").eq(highlightindex).text();
$("#auto").hide();
//隐藏的时候就把节点重新的赋值
highlightindex = -1;
$("#word").val(comtext);
}else{
//下拉框中没有选中的东西
alert("文本框的["+$("#word").val()+"]被提交了");
$("#auto").hide();
$("#word").blur();
}
}
});
$("input[id='chk']").click(function (){
alert("文本框的["+$("#word").val()+"]被提交了");
});
}); 最后返回xml 的代码<%@ page contentType="text/xml; charset=gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<words>
<s:if test="%{'absolute'.startsWith(#request.word)}">
<word>absolute</word>
</s:if>
<s:if test="%{'anyone'.startsWith(#request.word)}">
<word>anyone</word>
</s:if>
<s:if test="%{'anything'.startsWith(#request.word)}">
<word>anything</word>
</s:if>
<s:if test="%{'apple'.startsWith(#request.word)}">
<word>apple</word>
</s:if>
<s:if test="%{'break'.startsWith(#request.word)}">
<word>break</word>
</s:if>
<s:if test="%{'boolean'.startsWith(#request.word)}">
<word>boolean</word>
</s:if>
<s:if test="%{'breach'.startsWith(#request.word)}">
<word>breach</word>
</s:if>
</words>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jsp页面，嵌入查询数据库，有点原始了你可以把数据库查询封装到一个bean里，然后提供一个查询并返回json的方法在你的ajax页面（这个页面是一个jsp文件），Import这个bean，然后实例化，并调用哪个方法即可大概是"<td>"+getDBJson(1)+“</td>”
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个很简单,ajax配置下jsp上的js就可以了,模糊查询我也做出来过,也在使用中 我有简单的ajax实现代码,可以给你...一两句说不清楚QQ84024257
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
