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.onclick=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)" onblur="SetBlurStyle(this)" onfocus="SetFocusStyle(this)" id="TipListBox_$Order$" onclick="DoSelect(&quot;$ID$&quot;,this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" onmouseout="SetBlurStyle(this)" onmouseover="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.onkeydown=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>