JS,Javascript.AjaxPro.2 自动搜索

写博客的好处,你可以有点可做,更为的是,你可以把自己的思路总结出来
在解决一个问题时你难于有这样完整正确的思路,可你在写总结时却走的是正确的路.
思想就在此,为何解决问题是没想到此.

GOOGLE的搜索主页上有一个功能,当键入一个字符串时,就会自动匹配搜索出客户所需要的种种情况
让客户可以有更多选择性,其实此功能比较简单(我是我我实现的过程,当然GOOGLE的思想和我所猜想可能大致)

接下来我就简单实现它:

1]导入AjaxPro.2.dll(网络中有一个这样的版本严重有问题,害我一直以为是自己的程序有问题,网络中的版本不支持数组)
2]在配置文件中添加配置说明:

<!--用来注册Ajax方法-->
<httpHandlers>
 <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>

3]新建ASPX页面.

<script language="javascript" type="text/javascript" src="jscript.js"></script>
<input id="tbQuery" type="text" style="height:18px;width:241px" onkeyup="Matched(this.value)"/>
<div id="ShowDiv" style="display: none; z-index: 99; position: absolute; overflow:visible">
 <select id="selectS" onclick="SelectThis(this)">
 </select>
</div>

4]在CS文件中添加引用
using AjaxPro;
using System.Data.SqlClient;
5]注册类

protected void Page_Load(object sender, EventArgs e)
{
 Utility.RegisterTypeForAjax(typeof(CS类名));
}

6]添加AJAX方法,功能用于当客户输入一个字符串时就到数据库中查询一次结果并返回给客户端

[AjaxMethod]
public string GetMatched(string searchStr)
{
 SqlConnection con = new SqlConnection(connectionStr);
 con.Open();
 string strSQL = "select Name from tb_Name where Name like '" + searchStr + "%'";
 SqlCommand cmd = new SqlCommand(strSQL, con);
 SqlDataAdapter sda = new SqlDataAdapter();//cmd.ExecuteScalar();
 sda.SelectCommand = cmd;
 DataTable dt = new DataTable();
 sda.Fill(dt);
 if (dt.Rows.Count > 0)
 {
  string result = dt.Rows[0]["Name"].ToString();
  for (int i = 1; i < dt.Rows.Count; i++)
  {
   result += "+"+ dt.Rows[i]["Name"].ToString();
  }
  return result;
 }
 else
  return null;
}

7]最重要的是页面的显示

// JScript 文件

function Get$(obj)
{
    return document.getElementById(obj);
}
function Matched(name)
{
    var ss=MatchSelected.GetMatched(name);
    if(ss.value==null)
    {
        Get$("ShowDiv").style.display='none';
        return;
    }
    var sum=ss.value.split("+");
    if(sum.length==1)
    {
        Get$("ShowDiv").style.display='none';
        return;
    }
    
    CallBack(sum);
}

function CallBack(respone)
{
    if(respone.length!=0)
    {
        setDiv();
        Get$("selectS").options.length=0;
        Get$("selectS").size=respone.length;
        for(var i=0;i<respone.length;i++)//Get$("selectS").options.length
        {
            Get$("selectS").options[i]=new Option(respone[i]);
            Get$("selectS").options[i].style.color="red";
        }
    }
    else
        Get$("ShowDiv").style.display='none';
}

function setDiv()
{   //var showdiv=document.getElementById("ShowDiv");
    var tbx=document.forms[0].tbQuery;
    Get$("ShowDiv").style.dispaly='';
    if(Get$("tbQuery").value=="")
        Get$("ShowDiv").style.display='none';
    else
    {
        Get$("ShowDiv").style.display="";
    }
    
    var showLeft=GetLeft(Get$("tbQuery"));
    var showTop=GetTop(Get$("tbQuery"));
    
    Get$("ShowDiv").style.top=showTop+Get$("tbQuery").clientHeight;
    Get$("ShowDiv").style.left=showLeft;
    Get$("ShowDiv").style.width=Get$("tbQuery").offsetWidth;
    Get$("selectS").style.width=Get$("tbQuery").offsetWidth;
}
 
 
function SelectThis(sel)
{
    if(sel.selectedIndex>0)
    {
        Get$("tbQuery").value=sel.options[sel.selectedIndex].text;
        Get$("ShowDiv").style.display='none';
    }
    else
        Get$("ShowDiv").style.display='none';
}

function GetTop(obj)//获取HTML页面中标签的绝对位置
 {
    var top=obj.offsetTop;
    if(obj.offsetParent.tagName!="BODY")//循环到BODY
    {
        top+=GetTop(obj.offsetParent);//加上BODY的值
    }
    else//必须加上,不然在递归过程中会多加一次.
    {
        top+=obj.offsetParent.offsetTop;
    }
    return top;
 }

function GetLeft(obj)
 {
    var top=obj.offsetLeft;
    if(obj.offsetParent.tagName!="BODY")
    {
        top+=GetLeft(obj.offsetParent);
    }
    else
    {
        top+=obj.offsetParent.offsetLeft;
    }
    return top;
 }
 

 大功告成.其中关于DIV显示的位置更为重要.要考虑到它显示的地方.