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

  效果如下...

demo.jpg


调用页面

 
<!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
=+ "<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>


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;

        
#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

原文地址:https://www.cnblogs.com/gwazy/p/150943.html