享受自由与创造的乐趣！

I LOVE THIS GAME
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
JS + WebService 模拟 IE 的自动完成
本实例来自 msdn WebCast

效果预览：


1。新建项目 ASP.NET Web 应用程序（C#）“SearchTitles”

2。配置 Web.config 文件
Framework1.1 默认不支持 HttpGet 和 HttpPost ，所以先在Web.Config文件加入以下节点，使得WebService能被外部访问
<webServices>
   <protocols>
      <add name="HttpPost"/>
      <add name="HttpGet"/> 
   </protocols>
</webServices> 

添加数据库连接字符串到<configuration>节点：
 <appSettings>
    <add key="pubs" value="Server = localhost;database=pubs;uid=sa;pwd=sql2000" />
 </appSettings>

3。添加 WebService ，名为“SearchTitles.asmx”
包含 System.Data.SqlClient;System.Configuration; 命名空间；
申明全局变量
string sqlConStr = ConfigurationSettings.AppSettings["pubs"];
private System.Data.SqlClient.SqlConnection cn;

添加 WebMethod
        [WebMethod]
        public string doSearch(string  keyword)
        {
            cn = new System.Data.SqlClient.SqlConnection(sqlConStr);
            SqlDataAdapter da=new SqlDataAdapter("select top 20 title_id,title from titles where title like @title",cn);
            da.SelectCommand.Parameters.Add(new SqlParameter("@title","%"+keyword+"%"));
            DataSet ds=new DataSet();
            da.Fill(ds);
            return ds.GetXml();
        }

3。添加 GetTitles-JScript.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <TITLE></TITLE>
        <META content="Microsoft Visual Studio 7.0" name="GENERATOR">
        <SCRIPT ID="clientEventHandlersJS" LANGUAGE="javascript">
<!--
var index;
function window_onload() {
    div1.style.left=Text1.offsetLeft;
    div1.style.top=Text1.offsetTop+24;
    div1.style.width=Text1.offsetWidth;
    index=0;
}

function Text1_onkeyup()
{
    
    switch (window.event.keyCode)
    {
        case 13: 
            div1.style.visibility="hidden";
            break;
        case 40:
        case 39: 
            if (index < div1.childNodes.length) 
            {
                index=index+1;
            }
            for (i=1;i<=div1.childNodes.length;i++)
            {
                if (i==index)
                {
                    Text1.value=div1.childNodes[index-1].innerText.substr(1);
                    div1.childNodes[index-1].style.backgroundColor="lightblue";
                }
                else
                {
                    div1.childNodes[i-1].style.backgroundColor="white";
                }
            }
            break;
        case 38:
        case 37: 
            if (index>1) 
            {
                index=index-1;
            }
            for (i=1;i<=div1.childNodes.length;i++)
            {
                if (i==index)
                {
                    Text1.value=div1.childNodes[index-1].innerText.substr(1);
                    div1.childNodes[index-1].style.backgroundColor="lightblue";
                }
                else
                {
                    div1.childNodes[i-1].style.backgroundColor="white";
                }
            }
            break;
        default:
            index=0;
        
            div1.innerHtml ="";
            docSubmit = new ActiveXObject("MSXML2.DOMDocument");
            docSubmit.async = false;
            docSubmit.load("http://localhost/SearchTitles/SearchTitles.asmx/doSearch?keyword=" + Text1.value);
            
            docSubmit.loadXML(docSubmit.xml.replace(/&lt;/g,"<").replace(/&gt;/g,">"));
            
            //
            var s;
            s="";
            nodeList=docSubmit.documentElement.getElementsByTagName("Table");
            for (i=0;i<nodeList.length;i++)
            {
                s=s + "<div style=\"WIDTH:490px;\" class=\"gotTitle\" onmouseover=\"javascript:this.style.backgroundColor='lightblue'\" onmouseout=\"javascript:this.style.backgroundColor='white'\" onclick=\"return gotTitle_onclick()\">&nbsp;" + nodeList(i).selectSingleNode("title").text + "</div>";
            }
            div1.innerHTML=s;
            div1.style.visibility="visible";
    }
}

function gotTitle_onclick()
{
    if (window.event.srcElement.className="gotTitle")
    {
        Text1.value=window.event.srcElement.innerText.substr(1);
        div1.style.visibility="hidden";
    }
}

function gotTitle_onblur()
{
    div1.style.visibility="hidden";
}

//-->
        </SCRIPT>
        <style> .list{ BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px outset; BORDER-BOTTOM:black 1px solid; BORDER-LEFT:black 1px outset; FONT-SIZE:x-small; VISIBILITY:hidden; WIDTH:490px; HEIGHT:20px; CURSOR:default; POSITION:absolute; }
    </style>
    </HEAD>
    <BODY LANGUAGE="javascript" onload="return window_onload()">
        <P><FONT face="宋体">搜索图书：</FONT> <INPUT id="Text1" type="text" name="Text1" size="78" LANGUAGE="javascript" onkeyup="return Text1_onkeyup()">&nbsp;</P>
        <span id="div1" onblur="return gotTitle_onblur()" class="list"></span>
        <P><FONT face="宋体"></FONT></P>
    </BODY>
</HTML>


源码：SearchTitles.rar
posted on 2005-08-27 21:36  helloworld84  阅读(1001)  评论(3)    收藏  举报