asp.net 中实现录入时提示 (web service + js 实现 )

  效果如下...




调用页面

 

<! 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/ASPTips2/CH1/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\" οnmοuseοver=\"javascript:this.style.backgroundColor='lightblue'\" οnmοuseοut=\"javascript:this.style.backgroundColor='white'\" οnclick=\"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 >

webservice

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Data.SqlClient;
using  System.Diagnostics;
using  System.Web;
using  System.Web.Services;
using  System.Configuration;

namespace  Ch2
{
    /**//// <summary>
    /// Summary description for SearchTitles.
    /// </summary>
    public class SearchTitles : System.Web.Services.WebService
    {
        public SearchTitles()
        {
            //CODEGEN: This call is required by the ASP.NET Web Services Designer
            InitializeComponent();
        }

        private System.Data.SqlClient.SqlConnection sqlConnection1;

        Component Designer generated code#region Component Designer generated code
        
        //Required by the Web Services Designer 
        private IContainer components = null;
                
        /**//// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.sqlConnection1 = new System.Data.SqlClient.SqlConnection();
            // 
            // sqlConnection1
            // 
            this.sqlConnection1.ConnectionString = "workstation id=\"gw\";packet size=4096;user id=sa;data source=\"gw\";pe" +
                "rsist security info=True;initial catalog=pubs;password=";

        }

        /**//// <summary>
        /// Clean up any resources being used.
        /// </summary>
        protected override void Dispose( bool disposing )
        {
            if(disposing && components != null)
            {
                components.Dispose();
            }
            base.Dispose(disposing);        
        }
        
        #endregion

        // WEB SERVICE EXAMPLE
        // The HelloWorld() example service returns the string Hello World
        // To build, uncomment the following lines then save and build the project
        // To test this web service, press F5

        [WebMethod]
        public string doSearch(string  keyword)
        {
            //SqlConnection cn=new SqlConnection(ConfigurationSettings.AppSettings["pubs"]);
            SqlDataAdapter da=new SqlDataAdapter("select top 20 title_id,title from titles where title like @title",sqlConnection1);
            da.SelectCommand.Parameters.Add(new SqlParameter("@title","%"+keyword+"%"));
            DataSet ds=new DataSet();
            da.Fill(ds);
            return ds.GetXml();
        }
    }
}

转自

   http://www.microsoft.com/china/msdn/events/webcasts/shared/webcast/episode.aspx?newsID=1242101