文本框问题

在一个文本快  输入多个值  这些值是数据库读出来的  且文本框带自动补全

解决方案 »

  1.   

    既然你的问题问的那么浅显易懂。。那我也回答的浅显易懂好了
    AJAX
      

  2.   

    可以上传图片的啊!~ 你先把你的图片存在csdn的相册里面,然后在把图片放在这里就可以了!~
    如果是你说的那样的话!~   直接每次做追加 可行不!~   数据库读取到一条数据后  把数据现在text显示出来 在读取 就获取text的值 在追加上数据库读取的值!~~~~~~~~  
    感觉有点想的浅显了......
      

  3.   

    使用jqueryui的autocomplete试试
    http://jqueryui.com/demos/autocomplete/
      

  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>
        <title></title>
        <style type ="text/css">
        html,body{width:100%;height:100%}
        ul{padding:0px;margin:0px;list-style:none;}
        li{cursor:pointer;padding:0px 5px; line-height:25px;height:25px;}
        </style>
    </head>
    <body>
     <p>
        <input type='text' id='txtInput'  onkeyup='getSearchKeys()'/>
        <div id='divShow' style="position:absolute; z-index:9999; width:200px; height:auto; display:none;border:1px solid #ddd">
        <ul>
        <li>aaa</li>
        </ul>
        </div>
        </p>
    </body>
    <script type="text/javascript">
    var keys=['ada','sdfsd','bbb','sfga','dfhgfh','235s','dfew','ghjk','hjkghjk','fgjgfjf','fghjgfj','2345f','fthtr','sfgerw','tyerth','vnmu','wertewr','wert','asdfaf','zxcvd','gkju','dvfgdh','2354af','adsf','erterter','fghdfg','xvdfg','kjhu','qweasdas','xzce','werwre','zzczc','rtewtrew']; //  搜索值，可以用Ajax从数据库获取
    var txtInput ;
    var divShow ;
    window.onload=function()
    {
         txtInput =document.getElementById("txtInput");
         divShow = document.getElementById("divShow");
         var p =getAbsPoint(txtInput);
         divShow.style.left = p.x +'px';
         divShow.style.top = p.y + txtInput.offsetHeight + 'px';
       txtInput.onclick = divShow.onclick=function(e)
        {
             e = e||event;
             var t = e.target||e.srcElement        if(t.tagName.toLowerCase()=='li')
            {
              txtInput.value = t.innerHTML; 
               divShow.style.display = "none";
               return;
            }
            if(e && e.stopPropagation){
              //W3C取消冒泡事件
              e.stopPropagation();
              }else{
              //IE取消冒泡事件
              window.event.cancelBubble = true;
              }
        };
        document.body.onclick=function(e)
        {
            divShow.style.display = "none";
        };
    };
    function getSearchKeys()
    {
      var s= txtInput.value;
        if(s=='')
        {
            divShow.style.display = "none";
            return;
        }
          var arr=['<ul>'];
          for(var i=0;i<keys.length;i++)
          {
            if(keys[i].indexOf(s)>=0){
            arr.push('<li>'+keys[i]+'</li>');
            }
          }
        
          if(arr.length>1){
            arr.push('</ul>');
            divShow.innerHTML = arr.join('');
            divShow.style.display = "block";
          }else{
            divShow.style.display = "none";
          }
    }function getAbsPoint(e)
    {
        var x = e.offsetLeft;
        var y = e.offsetTop;
        while(e = e.offsetParent)
        {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        return {"x": x, "y": y};
    }
    </script>
    </html>