首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

仿58的搜索提示功能有关问题

2013-06-19 
仿58的搜索提示功能问题仿58的搜索提示,可以汉字,全拼,汉字的字母,汉字拼音不全,这几种都提示。 麻烦各位高

仿58的搜索提示功能问题
仿58的搜索提示,可以汉字,全拼,汉字的字母,汉字拼音不全,这几种都提示。
 
麻烦各位高人,帮我想想这个是怎么实现的,最好有完整代码哈。
 
小弟先谢谢各位,积分100奉上。
 




仿58的搜索提示功能有关问题


[解决办法]
这个对前端来说,不就是加了个监听事件吗?在输入框有变更的时候,就把输入框的内容利用ajax传到服务器,根据服务器的返回信息,加载下面那些个提示,至于服务器端,如何进行这个模糊的匹配,这个的算法应该挺复杂的,你在这估计找不到。
[解决办法]
就是ajax动态去数据,前台监听inputText或者onchange等时间,再复杂点就做个javascript模块处理相应的前台操作.关键还是在ajax取得的数据.
[解决办法]
<!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>

热点排行
Bad Request.