类似Google边输边搜

select.js
var searchReq=createAjaxObj();
function createAjaxObj()
{
    var httprequest=false;
    if(window.XMLHttpRequest)
    {
        httprequest=new XMLHttpRequest();
        if(httprequest.overrideMimeType)
            httprequest.overrideMimeType('text/xml');
    }
    else if (window.ActiveXObject)
    {
        //IE
        try
        {
            httprequest=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                httprequest=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    }
    return httprequest
}

var id_txt; //text_write
var id_hdn;
var id_div; //div_show
function searchSuggest(sid,v_txt_id,v_hdn_id,v_div_id,v_args)
{    
    if(document.getElementById(''+v_txt_id+'').value==document.getElementById(''+v_hdn_id+'').value)
    {
        return;
    }
    document.getElementById(''+v_hdn_id+'').value=document.getElementById(''+v_txt_id+'').value;

    id_txt = v_txt_id;
    id_hdn = v_hdn_id;
    id_div = v_div_id;
    if (document.getElementById(''+id_txt+'').value.length>0)
    {
        var str=escape(document.getElementById(''+id_txt+'').value);
        url="../WebService/Sv_Search.aspx?sid="+sid+"&t="+new Date().getTime()+"&args="+v_args+"&search="+str;        
        searchReq.open("get",url);
        searchReq.onreadystatechange=handleSearchSuggest;
        searchReq.send(null);    
    }
    else
    {
        document.getElementById(''+id_div+'').innerHTML="";
        document.getElementById(''+id_div+'').style.display="none";
    }    
}

function handleSearchSuggest()
{
    if(searchReq.readyState==4)
    {        
            var ss=document.getElementById(''+id_div+'');        
            ss.innerHTML="";
            s0=searchReq.responseText.length;        
            if (s0>0)
            {               
                xmldoc=searchReq.responseXML;                
                var message_nodes=xmldoc.getElementsByTagName("message");
                var n_messages=message_nodes.length;
                if (n_messages<=0)
                {
                    document.getElementById(''+id_div+'').innerHTML="";
                    document.getElementById(''+id_div+'').style.display="none";
                }
                else
                { 
                    document.getElementById(''+id_div+'').style.display="block";
                    for (i=0;i<n_messages;i++ )
                    {
                        var suggest='<div onmouseover="javascript:suggestOver(this);"';    
                        suggest+='onmouseout="javascript:sugggestOut(this);"';
                        suggest+='onclick="javascript:setSearch(this.innerHTML);"';
                        suggest +='class="suggest_link">'+message_nodes[i].getElementsByTagName("text")[0].firstChild.data+'</div>';
                        ss.innerHTML +=suggest;
                    }    
                }
            }
            else
            {
                document.getElementById(''+id_div+'').innerHTML="";
                document.getElementById(''+id_div+'').style.display="none";
            }        
    }
    else
    {
        //alert('网络连接失败');
    }
}

function suggestOver(div_value)
{
    div_value.className='suggest_link_over';
}

function sugggestOut(div_value)
{
  div_value.className='suggest_link';
}

function setSearch(div_value)
{
   document.getElementById(''+id_hdn+'').value=div_value;
   document.getElementById(''+id_txt+'').value=div_value;   
   document.getElementById(''+id_div+'').innerHTML="";
   document.getElementById(''+id_div+'').style.display="none";
}

SearchText.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SearchText.ascx.cs" Inherits="Controls_SearchText" %>
<script language="javascript" src="../Scripts/search.js"></script>
<input runat="server" id="txtSearch" name="txtSearch" type="text" autocomplete="off" />
<input runat="server" id="hdnSearch" name="hdnSearch" type="hidden" />
<br><div runat="server" id="search_suggest" style="display:none;" class="search_suggest"></div>
<style>
/**//*----------类似Google边输边搜样式----------*/
.suggest_link {}{
    background-color:#fff;padding:2px 6px 2px 6px;cursor:default;
}
.suggest_link_over {}{
    background:#e8e2fe;padding:2px 6px 2px 6px;cursor:pointer;
}
.search_suggest {}{
    z-index:999;position:absolute;color:gray;background-color:#ffffff;text-align:left;border:1px solid gray;
}
/**//*-------------------------------------------*/
</style>
<!--SearchText.ascx.cs-->
<%
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class Controls_SearchText : System.Web.UI.UserControl
{
    #region property
    private string _Sid = "";
    private string _Args = "";

    public bool ReadOnly
    {
        set
        {
            if (value == true)
            {
                this.txtSearch.Attributes.Add("readonly", "readonly");
            }
            else
            {
                this.txtSearch.Attributes.Remove("readonly");
            }
        }
    }
    public string Width
    {
        set
        {
            this.txtSearch.Style["width"] = value;
            this.search_suggest.Style["width"] = value;
        }       
    }
    public string CssClass
    {
        set
        {
            this.txtSearch.Attributes["class"] = value;
        }
    }
    /// <summary>
    /// 用于指向所要查询的数据源，必填
    /// </summary>
    public string Sid
    {
        set
        {
            this._Sid = value;
        }
    }
    /// <summary>
    /// 传递查询参数，可填
    /// </summary>
    public string Args
    {
        set
        {
            this._Args = value;
        }
    }
    #endregion

    protected void Page_Load(object sender, EventArgs e)
    {
        this.txtSearch.Attributes["onpropertychange"] = "javascript:searchSuggest(" + this._Sid + ",this.id,'" + this.hdnSearch.ClientID + "','" + this.search_suggest.ClientID + "','" + this._Args + "');";
    }
}

%>

Sv_Search.aspx.cs
public partial class WebService_Sv_Search : System.Web.UI.Page
{   
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Response.ContentType = "text/xml";
        string strSearchTarget = this.Request.QueryString["sid"].Trim();
        string strSearchTime = this.Request.QueryString["t"].Trim();
        string strSearchArgs = this.Request.QueryString["args"].Trim();
        string[] arrSearchArgs = null;
        if (!strSearchArgs.Equals(string.Empty))
        {
            arrSearchArgs = strSearchArgs.Split('|');
        }
        string strSearchString = this.Request.QueryString["search"].Trim();        
        DataTable dt = null;
        SvSearchDal objDal = new SvSearchDal();
        dt = objDal.GetCompletionList(int.Parse(strSearchTarget), strSearchTime, arrSearchArgs, strSearchString);
        StringBuilder xml = new StringBuilder();
        xml.Append("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
        xml.Append("<root>\n");
        for(int i=0; i<dt.Rows.Count; i++)
        {
            xml.Append("<message id=\"" + Convert.ToString(i + 1) + "\">\n");
            xml.Append("<text>" + dt.Rows[i][0].ToString().Trim() + "</text>\n");
            xml.Append("</message>\n");
        }
        xml.Append("</root>");
        this.Response.Write(xml.ToString());
        this.Response.Flush();
        this.Response.Close();
    }
}