异步处理数据 一个文本框输入 号码数据 到数据库中查找 从数据库中返回多个值(异步显示) 显示到页面的下拉列表框中 这个怎么实现 javaweb ?? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 ajax,但是如果绑定到keypress事件当中对服务器请求的次数又太多。 用jquery,ajax提交请求,然后jquery解析json,append到你的comobox上面去 你看看这个http://hi.baidu.com/_feiying/blog/item/7ea87ad41b2db409a08bb772.html JQuery 實現Google搜索動態提示2009-03-21 15:211.拷貝js代碼首先要將jquery-1.2.3.pack.js放在js文件加下!<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script><script language="javascript">var line = 0; function del(){ if($("#newDiv")){ $("#newDiv").remove(); line = 0; }} $(document).ready(function(){ //文本框失去焦点时层消失 $(document.body).click(function(){ del(); }); $(document).keydown(function(){ // 38 上 40下 13 回车 if($("#newDiv")){ if(event.keyCode == 40){ $(".google > tbody > tr").eq(line) .css("backgroundColor", "blue") .css("color", "white"); $(".google > tbody > tr").eq(line < 0 ? 0 : line - 1) .css("backgroundColor", "white") .css("color", "black"); line = (line == $(".google > tbody > tr").length ? 0 : line + 1); }else if(event.keyCode == 38){ line = (line == 0 ? $(".google > tbody > tr").length : line - 1); $(".google > tbody > tr").eq(line) .css("backgroundColor", "blue") .css("color", "white"); $(".google > tbody > tr").eq(line > $(".google > tbody > tr").length ? 0 : line + 1) .css("backgroundColor", "white") .css("color", "black"); }else if(event.keyCode == 13){ $("#skey").val($(".google > tbody > tr").eq(line - 1).find("td").eq(0).html()); del(); } } }); $("#skey").bind("propertychange", function(){ del(); var top = $("#skey").offset().top; var left = $("#skey").offset().left; var newDiv = $("<div/>").width($("#skey").width()+4 ) .css("position", "absolute") .css("backgroundColor", "white") .css("left", left) .css("top", top + $("#skey").height() + 6) .css("border", "1px solid blue") .attr("id", "newDiv"); var table = $("<table class='google' width='100%'/>") .attr("cellpadding", "0") .attr("cellspacing", "0"); $.post("AjaxSearchItemByItemCodeServlet", {skey: $("#skey").val()}, function(xml){ $(xml).find("results result").each(function(){ var skey = $(this).find("categoryCode").text(); var itemDesc = $(this).find("itemDesc").text(); var tr = $("<tr/>").css("cursor", "pointer").mouseout(function(){ $(this).css("backgroundColor", "white").css("color", "black"); }).mouseover(function(){ $(this).css("backgroundColor", "blue").css("color", "white"); }).click(function(){ $("#skey").val($(this).find("td").eq(0).html()); del(); }); var td1 = $("<td/>").html(skey) .css("margin", "5 5 5 5"); var td2 = $("<td/>").html(itemDesc) .attr("align","right") .css("margin", "5 5 5 5") .css("color","green"); tr.append(td1).append(td2); table.append(tr); newDiv.append(table); }); }); $(document.body).append(newDiv); if($("#skey").val() == ""){ $("#newDiv").remove(); } });});</script>其中skey是輸入文本框的 name還是id ??這里需要驗證!2.修改AjaxServlet中的SQL語句String sql =“select itemCode,itemDesc from FeesDetail order by itemCode ”3.修改XML中的傳遞參數while(rs.next()){ String itemCode = rs.getString("itemCode"); String itemDesc = rs.getString("itemDesc"); xml.append("<result>"); xml.append("<itemCode>"+itemCode+"</itemCode>"); xml.append("<itemDesc>"+itemDesc+"</itemDesc>"); xml.append("</result>"); }4.設置輸入框不記憶輸入內容。<input type="text" autocomplete="off" name = "skey" id ="skey">5.控制層遮擋下面的內容。 如何当JS代码启动本地QQ的时候出现提示 关于导航栏防刷新的,高手请进…… javascript中constructor Jquery中的href取值问题 jquery在ie下无法获取到值,在ff下正常的原因? 在线等。。。 请教高手一个关于数值相等判断的问题 不能让隐藏的iframe进行提交,firefox不兼容的问题? javascript 如何获取IE滚动条的纵向位置 如果控制图层在鼠标指针位置显示? JQuery1.10支持css3吗 [原创]jQuery在线演示大全 js动态创建输入框
http://hi.baidu.com/_feiying/blog/item/7ea87ad41b2db409a08bb772.html
2009-03-21 15:21
1.拷貝js代碼首先要將jquery-1.2.3.pack.js放在js文件加下!<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script language="javascript">var line = 0;
function del(){
if($("#newDiv")){
$("#newDiv").remove();
line = 0;
}
}
$(document).ready(function(){
//文本框失去焦点时层消失
$(document.body).click(function(){
del();
});
$(document).keydown(function(){
// 38 上 40下 13 回车
if($("#newDiv")){
if(event.keyCode == 40){
$(".google > tbody > tr").eq(line)
.css("backgroundColor", "blue")
.css("color", "white");
$(".google > tbody > tr").eq(line < 0 ? 0 : line - 1)
.css("backgroundColor", "white")
.css("color", "black");
line = (line == $(".google > tbody > tr").length ? 0 : line + 1);
}else if(event.keyCode == 38){
line = (line == 0 ? $(".google > tbody > tr").length : line - 1);
$(".google > tbody > tr").eq(line)
.css("backgroundColor", "blue")
.css("color", "white");
$(".google > tbody > tr").eq(line > $(".google > tbody > tr").length ? 0 : line + 1)
.css("backgroundColor", "white")
.css("color", "black");
}else if(event.keyCode == 13){
$("#skey").val($(".google > tbody > tr").eq(line - 1).find("td").eq(0).html());
del();
}
}
});
$("#skey").bind("propertychange", function(){
del();
var top = $("#skey").offset().top;
var left = $("#skey").offset().left;
var newDiv = $("<div/>").width($("#skey").width()+4 )
.css("position", "absolute")
.css("backgroundColor", "white")
.css("left", left)
.css("top", top + $("#skey").height() + 6)
.css("border", "1px solid blue")
.attr("id", "newDiv");
var table = $("<table class='google' width='100%'/>")
.attr("cellpadding", "0")
.attr("cellspacing", "0");
$.post("AjaxSearchItemByItemCodeServlet", {skey: $("#skey").val()}, function(xml){
$(xml).find("results result").each(function(){
var skey = $(this).find("categoryCode").text();
var itemDesc = $(this).find("itemDesc").text();
var tr = $("<tr/>").css("cursor", "pointer").mouseout(function(){
$(this).css("backgroundColor", "white").css("color", "black");
}).mouseover(function(){
$(this).css("backgroundColor", "blue").css("color", "white");
}).click(function(){
$("#skey").val($(this).find("td").eq(0).html());
del();
});
var td1 = $("<td/>").html(skey)
.css("margin", "5 5 5 5");
var td2 = $("<td/>").html(itemDesc)
.attr("align","right")
.css("margin", "5 5 5 5")
.css("color","green");
tr.append(td1).append(td2);
table.append(tr);
newDiv.append(table);
});
});
$(document.body).append(newDiv);
if($("#skey").val() == ""){
$("#newDiv").remove();
}
});
});
</script>
其中skey是輸入文本框的 name還是id ??這里需要驗證!2.修改AjaxServlet中的SQL語句
String sql =“select itemCode,itemDesc from FeesDetail order by itemCode ”3.修改XML中的傳遞參數
while(rs.next()){
String itemCode = rs.getString("itemCode");
String itemDesc = rs.getString("itemDesc");
xml.append("<result>");
xml.append("<itemCode>"+itemCode+"</itemCode>");
xml.append("<itemDesc>"+itemDesc+"</itemDesc>");
xml.append("</result>");
}4.設置輸入框不記憶輸入內容。
<input type="text" autocomplete="off" name = "skey" id ="skey">
5.控制層遮擋下面的內容。