js搜索提示参考

javascript智能提示（text输入字符，出现相应提示）

默认分类 2010-07-09 11:19:45 阅读131 评论0   字号：大中小 订阅

最近做的项目中有智能提示的需求，就用js做了一个，感觉还不错。

就是在前台文本框text中输入字符时异步从后台读取相对应的数据显示text下方，以作提示，就像一般的搜索引擎的提示一样。

下面是异步从后台读取数据例子：

<script type="text/javascript">
/***************************************
// 文本框智能提示
***************************************/
var currentPos = -1;    //当前选项位置
var listData = new Array();    //提示数据列表   

function GetIE(e)
{
    //获取对象的大小及位置
    var t=e.offsetTop;
    var l=e.offsetLeft;
    var w=e.offsetWidth;
    var h=e.offsetHeight;
    while(e=e.offsetParent)
    {
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    var re = {Top:t,Left:l,Width:w,Height:h}
    return re;
}
function DoSelect(id,text)
{
    //完成选择项
    var userid = new Array();
    //提取用户信息中的用户id
    userid = text.split(",");
    document.getElementById(id).value=userid[0];        //返回选项的值给文本框
    DeleteTip("TipListBox");                    //删除提示窗口
}
function SelectItem(Pos)
{
    //将焦点给指定位置的项
    var e = document.getElementById("TipListBox_"+Pos);
    if(e != null) e.focus();
    event.returnValue = 0;
}
function SetFocusStyle(refObj)
{
    //设置光标所在项的样式
    refObj.style.color="#fff";
    refObj.style.backgroundColor="#0066CC";
}
function SetBlurStyle(refObj)
{
    //恢复光标所在项的样式
    refObj.style.color="#000";
    refObj.style.backgroundColor="";
}
function DeleteTip(id)
{
    //删除提示窗口
    if(document.getElementById(id) != null)
    {
        document.getElementById(id).removeNode(true);
    }
}

function ShowTip(refObj)
{
    DeleteTip("TipListBox");        //删除之前的提示窗口
   
    document.οnclick=function()
    {
        //如果鼠标操作不在当前文本框，则将提示窗口删除
        if(event.srcElement.id != refObj.id)
        {
            DeleteTip("TipListBox");
            document.onclick = null;
        }
    }
   
    var senduserid = document.getElementById('senduserid').value;
 listData.length = 0;
    listData = new Array();      
    //根据研修号异步查询用户信息
    var url = "senduseridAction.action" ;
 var data = {"senduserid":senduserid};
 $.post(url,data,function(xml){ 
  //判断是否有错误
  if($(xml).find("error").size() > 0){
  }
  //解析xml文件并为需要的标签生成html代码
  //如果后台返回的是无数据
  if($(xml).find("userobj").size() <= 0){
  }
  
  var str = refObj.value.toLowerCase();                //当前文本框的值
     var eMember = GetIE(refObj);
     var eWinElement = document.createElement("div");
     eWinElement.id="TipListBox";                        //指定提示窗口ID为TipListBox
     eWinElement.style.cssText = "overflow:auto;background-Color:#fff;font-size:12px;border:1px solid #000;position:absolute;left:"+eMember.Left+"px;top:"+(eMember.Top+eMember.Height)+"px;width:"+eMember.Width+"px";
     var li = '<a href="javascript:void(0)" οnblur="SetBlurStyle(this)" οnfοcus="SetFocusStyle(this)" id="TipListBox_$Order$" οnclick="DoSelect(&quot;$ID$&quot;,this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" οnmοuseοut="SetBlurStyle(this)" οnmοuseοver="SetFocusStyle(this)">$Value$</a>';    //列表项模板
     var HTML = "";
     var iCount = 0;
   
  if($(xml).find("userobj").size() > 0){
   $(xml).find("userobj").each(function(i,n){
    var userid = $(this).find("userid").text();
    var username = $(this).find("username").text();
    var gradename = $(this).find("gradename").text();
    var majorname = $(this).find("majorname").text();
    var schoolname = $(this).find("schoolname").text();
    var obj = userid+","+username+","+gradename+majorname+","+schoolname;
    listData[i] = obj;
   });
  }
     for(var i=0; i<listData.length; i++)
     {
        //添加智能提示配匹的项到提示窗口
        HTML += li.replace("$Value$",listData[i]).replace("$ID$",refObj.id).replace("$Order$",iCount);
        iCount ++;
 
     }
     if(HTML == "") return;        //如果没有配匹的值则不显示提示窗口
     eWinElement.innerHTML = HTML;
     document.body.appendChild(eWinElement);
     if(parseInt(eWinElement.offsetHeight)>100) eWinElement.style.height="100px";    //定义提示窗口高度
     document.οnkeydοwn=function()
     {
         if(event.keyCode == 40 && currentPos < (iCount-1))
         {
             //向下的按键操作
             SelectItem(++currentPos);
         }
         if(event.keyCode == 38 && currentPos > 0)
         {
             //向上的按键操作
             SelectItem(--currentPos);
         }
         if(event.keyCode != 38 && event.keyCode != 40)
         {
             //其它按钮将当前选项恢复-1的位置
             currentPos = -1;
         }
     }
 });
 
}
</script>