帮忙看看这个js要怎么写,搞不出来老大要开人了 一个可以编辑的下拉框当输入框获取焦点时,展示下拉列表的内容(就是不用点右边那个图标,自动展示)在下拉框内输入数据,根据输入的值刷新下拉列表(下拉列表内容是从数据库中查询出来的),并选中第一个 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 第一个应该是onfocus()来完成!第二个在下拉框内输入数据,根据输入的值刷新下拉列表,这个我不理解,如果我输入一个字,也入库保存并显示在下拉列表里吗?输入2个或多个也做一次入库处理吗?这个好象不太符合实际生产上的效率啊。毕竟我们普通应用不能和百度比,他们的服务器牛X! 很明显的ajax应用啊!把ajax好好学下啊 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script></head> <body> <form name="myform" action="selectuserinfo.do" method="post"> <input type="submit"/> <div style="position: absolute; left: 100px; top: 100px; background:#cc00cc ; height: 300px;width: 400px;"> <input type="text" name="mytext" id="mytext" onblur="gettextvalue()"/> <div id="myshowlistdiv" name="myshowlistdiv" style="position: absolute; left: 0px; top: 21px; background:gray ; height: 300px;width: 153px;"> sdf </div> <div> <script type="text/javascript" language="javascript"> function gettextvalue(){ var mytextname= document.getElementById("mytext"); alert(mytextname.value); $.post("selects.do?mytextname="+mytextname.value+"",function(data){ alert(data); }); } </script> </form> </body></html> 描述了半天,原来不就是ajax autocomplete or suggest吗。看看这里的教程就知道了www.open-open.com/ajax/AutoComplete.htm说容易也容易,但对你现在来说,也需要学不少。先应付过这一关吧。然后抓紧补充知识。切忌把这里当作你应付工作的宝地。时常来看看帖子,学习一下,而不是每次有事才来,一来就要。 autocomplete:http://www.open-open.com/ajax/AutoComplete.htm Sample & Download:http://www.open-open.com/ajax/ajax20080314223803.htm 给你一个我操作的例子,用了jquery库,代码不多,供参考!数据库操作和普通操作一样,自己添加!ajax.htm: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css">.input{width:200px;height:25px;line-height:25px;border:1px solid #000;margin:5px;}#div{width:200px;height:auto;border:1px solid #000;display:none;position:absolute;background:#ffffff;}.button{width:90px;height:30px;border:1px solid #000;margin-top:15px;}.over{background:#cccccc;}.out{background:#ffffff;}ul{list-style:none;margin:0px;padding:0px;}ul{line-height:25px;height:25;}</style><script type="text/javascript"> $(function(){//alert($('#type2').offset().top); $('#type').focus(function(){//显示弹出层并进行定位 $('#div').fadeIn(); $('#div').css({"top":$('#type').offset().top+29,"left":$('#type').offset().left}); }); $('#type').blur(function(){ $('#div').fadeOut(); }); $('#div li').hover(//换色 function(){ $(this).removeClass('out'); $(this).addClass('over'); }, function(){ $(this).removeClass('over'); $(this).addClass('out'); }); $('#type').keyup(function(){//键盘释放执行AJAX的后台PHP请求! $.ajax({ url:'php.php', type:'post', async:false, data:{key:$('#type').val()}, beforeSend:function(){$('#ajax').html("<img src='loading.gif'></img>");}, success:function(data){ var str=$('#div ul').html(); $('#div ul').html(str+'\n<li>'+data+'</li>'); }, error:function(data,status){alert(status);} }); });})</script> </head> <body>姓名:<input type="text" id="type2" class="input"><br/>地址:<input type="text" id="type" class="input"><span id="ajax"></span><br/><div id="div"><ul> <li>显示部分1</li> <li>显示部分1</li> <li>显示部分1</li> </ul></div>提交:<input type="button" id="type3" value="提交查询" class=".button"></body></html> php.php: <?phpheader("content-type:charset=utf-8"); if($_POST['key'])//取得从客户端传输的key,对应$.ajax里的data:{key:...} { $key=$_POST['key']; echo '从PHP返回的'.$key;//输出值让客户端HTM页面获取!这里你也可以进行数据库入库的操作,和普通入库是一样的了。 }?>基本思路就是这样了。我不知道你的后台是什么,但是前台部分是通用的,如果你是用asp,就把前台改成$.ajax参数里的url:asp.asp,即可! 注:ajax.htm,和 php.php文件本身都用了utf-8编码,方便输入中文防乱码,用记事本打开文件本身修改就是了!其他编码已经写好了utf-8了。 来看看开人 falizixun2 好祥细 div +css 模拟下拉框js + ajax 处理逻辑 除了 VML语言 能画图 还有其它什么吗 JS遍历IMG 为什么windows.open()部署到服务器不能打开 为什么火狐和IE的差别这么大 javascript 将已经打开的全屏窗口最小化 如何判断代码一行结尾 onchange 事件的奇怪问题 ●●●100分●●●如何点一下按钮就在页面中创建一个DIV???? 如何在子窗口内直接获取框架或者框架上其他子窗口内的变量值(别用session.和cookie) 高手请进:用javascript实现解释器! JS switch 如何数字递增? 请教jquery 中 select选项左右复制移动的一个小问题!
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script></head>
<body>
<form name="myform" action="selectuserinfo.do" method="post">
<input type="submit"/>
<div style="position: absolute; left: 100px; top: 100px; background:#cc00cc ; height: 300px;width: 400px;">
<input type="text" name="mytext" id="mytext" onblur="gettextvalue()"/>
<div id="myshowlistdiv" name="myshowlistdiv" style="position: absolute; left: 0px; top: 21px; background:gray ; height: 300px;width: 153px;">
sdf
</div>
<div>
<script type="text/javascript" language="javascript">
function gettextvalue(){
var mytextname= document.getElementById("mytext");
alert(mytextname.value);
$.post("selects.do?mytextname="+mytextname.value+"",function(data){ alert(data); });
}
</script>
</form>
</body>
</html>
看看这里的教程就知道了
www.open-open.com/ajax/AutoComplete.htm
说容易也容易,但对你现在来说,也需要学不少。
先应付过这一关吧。然后抓紧补充知识。切忌把这里当作你应付工作的宝地。时常来看看帖子,学习一下,而不是每次有事才来,一来就要。
http://www.open-open.com/ajax/AutoComplete.htm
http://www.open-open.com/ajax/ajax20080314223803.htm
ajax.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.input{width:200px;height:25px;line-height:25px;border:1px solid #000;margin:5px;}
#div{width:200px;height:auto;border:1px solid #000;display:none;position:absolute;background:#ffffff;}
.button{width:90px;height:30px;border:1px solid #000;margin-top:15px;}
.over{background:#cccccc;}
.out{background:#ffffff;}
ul{list-style:none;margin:0px;padding:0px;}
ul{line-height:25px;height:25;}
</style>
<script type="text/javascript"> $(function(){
//alert($('#type2').offset().top);
$('#type').focus(function(){//显示弹出层并进行定位
$('#div').fadeIn();
$('#div').css({"top":$('#type').offset().top+29,"left":$('#type').offset().left});
});
$('#type').blur(function(){
$('#div').fadeOut();
});
$('#div li').hover(//换色
function(){
$(this).removeClass('out');
$(this).addClass('over');
},
function(){
$(this).removeClass('over');
$(this).addClass('out');
});
$('#type').keyup(function(){//键盘释放执行AJAX的后台PHP请求!
$.ajax({
url:'php.php',
type:'post',
async:false,
data:{key:$('#type').val()},
beforeSend:function(){$('#ajax').html("<img src='loading.gif'></img>");},
success:function(data){
var str=$('#div ul').html();
$('#div ul').html(str+'\n<li>'+data+'</li>');
},
error:function(data,status){alert(status);}
});
});
})</script>
</head>
<body>
姓名:<input type="text" id="type2" class="input"><br/>
地址:<input type="text" id="type" class="input"><span id="ajax"></span><br/>
<div id="div">
<ul>
<li>显示部分1</li>
<li>显示部分1</li>
<li>显示部分1</li>
</ul>
</div>
提交:<input type="button" id="type3" value="提交查询" class=".button"></body>
</html> php.php:
<?php
header("content-type:charset=utf-8");
if($_POST['key'])//取得从客户端传输的key,对应$.ajax里的data:{key:...}
{
$key=$_POST['key'];
echo '从PHP返回的'.$key;//输出值让客户端HTM页面获取!这里你也可以进行数据库入库的操作,和普通入库是一样的了。 }
?>
基本思路就是这样了。我不知道你的后台是什么,但是前台部分是通用的,如果你是用asp,就把前台改成$.ajax参数里的url:asp.asp,即可!
注:ajax.htm,和 php.php文件本身都用了utf-8编码,方便输入中文防乱码,用记事本打开文件本身修改就是了!其他编码已经写好了utf-8了。