Javascript 用textbox实现listbox的功能,

第一次发帖不知道怎么贴图,大概的效果就是在HTML页面的Textbox中输入一个A,下面就会出现一些A开头的选择项,和一些搜索程序一样,例如百度什么的,这个要怎么实现,求大神赐教,~~~

解决方案 »

  1.   

    ajax请求后台当你输入的时候(如：onchange、onprototypechange、onkeydonw等等)请求后台用ajax，匹配你输入的内容，然后返回给html的js，通过dom操作重新生成div显示在输入框下端
      

  2.   

    谢谢, 我再想问一下,如果我想用历史记录的方法来实现行吗,历史记录不也是出现在输入框的下面吗,用那个应该也可以实现差不多的功能吧,不然又要写div样式,我不太会那个
      

  3.   

    你说的貌似是自动完成查询功能！使用ajax的工具包，里边有个自动完成控件可以实现，我貌似有，如果想要可以给我说下，转给你试试！
      

  4.   

    <!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>
    </head>
    <style>
    .y{
    color:#000;
    border:1px solid #CCC;
    width:200px;
    }
    .y:hover
    {
    background-color:#0FF;
    }
    </style>
    <body>
    <script language="javascript">
       var m;
       var w;
       //var，是声明的变量
       window.onload=init;
       sz=Array("a","abc","dac","sun","zs","地震","大运会","大学生");
       //Array 是数组，把（“a”，……）这些数组存放在sz里边
       function init()
       {
       m=document.getElementById("my");
       //找到my的div框
       }
       function jy()
       {   w=document.getElementById("wb");
           gjc=w.value;//文本框里的东西付给gjc
       m.innerHTML="";//设置m的div里边为空（因为选择后m的框需要消失）
           for(i=0;i<sz.length;i++)
       {
       if(sz[i].indexOf(gjc)>-1)//indexof查找子串的位置，
       {
       d=document.createElement("div");
       //动态添加一个div
       d.className='y';
       //给动态的div加一个css
       d.innerHTML=sz[i];
       //把sz[i]值赋予给动态div
       d.onclick=dj;
       //给动态的div添加点击事件dj
       m.appendChild(d);//把d的div内容赋给m的div内
       }
       
    }

       }
       function dj(e)
       {
       e=e||event;
       mb=e.target||e.srcElement;
       //alert(mb.innerHTML);
       w.value=mb.innerHTML;
       m.innerHTML="";
       }
    </script>
    <form action="" method="post">
    <input type="text" name="wb" id="wb" value=""  onkeyup="jy();"/>
        <div id="my"></div>
    </form>
    </body>
    </html>