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

解决方案 »

  1.   

    第一个应该是onfocus()来完成!第二个在下拉框内输入数据,根据输入的值刷新下拉列表,这个我不理解,如果我输入一个字,也入库保存并显示在下拉列表里吗?输入2个或多个也做一次入库处理吗?这个好象不太符合实际生产上的效率啊。毕竟我们普通应用不能和百度比,他们的服务器牛X!
      

  2.   

    很明显的ajax应用啊!把ajax好好学下啊
      

  3.   

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

  4.   

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

  5.   

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

  6.   

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

  7.   

    给你一个我操作的例子,用了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,即可!
      

  8.   

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

  9.   

    来看看开人  falizixun2 好祥细
      

  10.   

    div +css 模拟下拉框js + ajax 处理逻辑