帮忙看看这个js要怎么写，搞不出来老大要开人了

cyc123007512 2011-03-10 08:27:41

一个可以编辑的下拉框
当输入框获取焦点时，展示下拉列表的内容（就是不用点右边那个图标，自动展示）
在下拉框内输入数据，根据输入的值刷新下拉列表（下拉列表内容是从数据库中查询出来的），并选中第一个

...全文

187 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

cyc123007512 2011-03-12

打赏
举报

我用easyui实现了，谢谢各位

yhtapmys 2011-03-11

打赏
举报

Sample & Download：
http://www.open-open.com/ajax/ajax20080314223803.htm

yhtapmys 2011-03-11

打赏
举报

autocomplete：
http://www.open-open.com/ajax/AutoComplete.htm

sir424 2011-03-11

打赏
举报

来看看开人 falizixun2 好祥细

liangtiana 2011-03-11

打赏
举报

用ajax,简单的JS

cyc123007512 2011-03-11

打赏
举报

谢谢各位的帮忙

hch126163 2011-03-11

打赏
举报

div +css 模拟下拉框

js + ajax 处理逻辑

kaifadi 2011-03-11

打赏
举报

注：ajax.htm,和 php.php文件本身都用了utf-8编码，方便输入中文防乱码，用记事本打开文件本身修改就是了！其他编码已经写好了utf-8了。

kaifadi 2011-03-11

打赏
举报

给你一个我操作的例子，用了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:

<?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,即可！

碧海情天-赵亮 2011-03-10

打赏
举报

描述了半天，原来不就是ajax autocomplete or suggest吗。
看看这里的教程就知道了
www.open-open.com/ajax/AutoComplete.htm
说容易也容易，但对你现在来说，也需要学不少。
先应付过这一关吧。然后抓紧补充知识。切忌把这里当作你应付工作的宝地。时常来看看帖子，学习一下，而不是每次有事才来，一来就要。

汉尼拔 2011-03-10

打赏
举报

你后台用什么啊

costaa2005 2011-03-10

打赏
举报

<%@ 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">

<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>

costaa2005 2011-03-10