关于文本框输入显示有关问题-AJAX教程-爱易网页

关于文本框输入显示有关问题

日期：2014-05-16　浏览次数：20675 次

关于文本框输入显示问题
例如：
在文本框中输入ID号

在输入的过程中，输入部分ID号，文本框下方显示出从数据库中模糊查询的结果

数据库中存在的ID
100000
110000
111000
111100
111110
111111

当输入11时，文本框下面显示
110000
111000
111100
111110
111111

请教各位高手

------解决方案--------------------
用Ajax吧
参考http://www.cnblogs.com/Terrylee/archive/2006/08/07/atlas_series_articles.html提供的讲解
http://terrylee.cnblogs.com/archive/2006/07/27/Atlas_AutoCompleteExtender.html

------解决方案--------------------

HTML code


<!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;border-bottom:1px solid #dee; }
    .show{position:absolute; z-index:9999; width:200px; height:auto; display:none;border:1px solid #ddd; background-color:#fff}
    </style>
</head>
<body>
 <p>
 <table id="tb" border=1>
     <tr><td><input type='text'  /></td><td>aaaaaaaa</td></tr>
     <tr><td><input type='text' /></td><td>bbbbbbbb</td></tr>
     <tr><td><input type='text' /></td><td>cccccccc</td></tr>
 </table>

    </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从数据库获取
function init(txt)
{
      var   divShow = document.createElement("div");
      divShow.className ="show"; 
      document.body.appendChild(divShow);
         divShow.onclick=function(e)
        {
            doClick(e,txt,this);
        };
        txt.onclick=function(e)
        {
             doClick(e,this,divShow);
        };
    txt.onkeyup=function(e){getSearchKeys(this,divShow);};
    
    bindEvent(document.body,'click',function()
    {
         divShow.style.display = "none";
    });

}

function doClick(e,txt,divShow){
      e = e||event;
     var t = e.target||e.srcElement
    if(t.tagName.toLowerCase()=='li')
    {
       txt.value = t.innerHTML; 
       divShow.style.display = "none";
       return;
    }
    /**
    if(e && e.stopPropagation){
      //W3C取消冒泡事件
      e.stopPropagation();
      }else{
      //IE取消冒泡事件
      window.event.cancelBubble = true;
      }
      */
}
function getSearchKeys(txt,divShow)
{
  var s= txt.value.trim();
    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('');
        var p =getAbsPoint(txt);
         divShow.style.left = p.x +'px';
         divShow.style.top = p.y + txt.offsetHeight + 'px';
        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};
}
Strin

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

关于文本框输入显示有关问题

相关资料更多>

推荐阅读更多>

关于 文本框输入 显示有关问题

相关资料更多>

推荐阅读更多>

关于文本框输入显示有关问题