vs2005 AutoCompleteExtender 控件的使用

一路有你 2011-04-21 02:41:30

前台：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1"
Enabled="true"
MinimumPrefixLength="1"
ServiceMethod="GetList"
ServicePath="WebService.asmx">
</cc1:AutoCompleteExtender>
</form>
</body>
</html>

WebService.asmx 页面
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService {

public WebService () {

//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}

//[WebMethod]
//public string HelloWorld() {
// return "Hello World";
//}
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetList(string prefixText, int count)
{
string[] returnValue1 = { "张飞", "张苞", "张郃", "张辽" };
string[] returnValue2 = { "刘备", "刘禅", "刘璋", "刘表" };
switch (prefixText.ToLower())
{
case "张":
return returnValue1;
case "zhang":
return returnValue1;
case "刘":
return returnValue2;
case "liu":
return returnValue2;
default:
return new string[0];
}
}

}

...全文

43 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

子夜__ 2011-04-21

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  

    <html>  

        <head>  

            <title>google.html</title>  

            <meta http-equiv="content-type" content="text/html;charset=GBK">  

            <script type="text/javascript" src="js/jquery-1.3.2.js" charset="GBK"></script>  

     

           <script type="text/javascript">  

               var line = 0;  

               var oldValue = '';  

               function del() {  

                   if ($("#newDiv")) {  

                       $("#newDiv").remove();  

                       line = 0;  

                   }  

               }  

             

               $(document).ready(function() {  

                   //文本框失去焦点时层消失  

                       $(document.body).click(function() {  

                          del();  

                       });  

               });  

             

               function vchange() {  

                  //alert("value change");  

                   del();  

     

                   //定位DIV  

                   var top = $("#key").offset().top;  

                   var left = $("#key").offset().left;  

                   var newDiv = $("<div/>").width($("#key").width() + 6).css(  

                           "position", "absolute").css("backgroundColor", "white")  

                           .css("left", left).css("top", top + $("#key").height() + 6)  

                           .css("border", "1px solid blue").attr("id", "newDiv");  

     

                   /*过滤非法字符输入*/  

                   if($("#key").value != ""){  

                       //alert(oldValue);  

                         

                       /*过滤同名多次查询*/  

                       if ($("#key").val() != oldValue) {  

                           oldValue = $("#key").val();  

                           var url = 'tsearch.action';  

                           var params = {  

                                   //POST参数编码处理  

                               key : encodeURI($("#key").val())  

                           };  

                           jQuery.post(url, params, callbackFun, 'json');  

                       }  

                       $(document.body).append(newDiv); //添加DIV  

                   }  

     

                   if ($("#key").val() == "") {  

                       $("#newDiv").remove();  

                   }  

               }  

             

               //回调函数  

               function callbackFun(data) {  

                   var table = $("<table width='100%'/>").attr("cellpadding", "0").attr(  

                           "cellspacing", "0");  

                   if (data.result == "") {  

                       //alert("你的关键字有误！");  

                       var tr = $("<tr/>");  

                       var td1 = $("<td/>").html("记录为空").css("fontSize", "12px")  

                       .css("margin", "5 5 5 5");  

                      tr.append(td1);  

                       table.append(tr);  

                       $("#newDiv").append(table);  

                   } else {  

                       var array = data.result.split(",");  

                       for ( var i = 0; i < array.length - 1; i++) {  

                           //alert(array[i]);  

                          var tr = $("<tr/>").css("cursor", "pointer").mouseout(  

                                   function() {  

                                       $(this).css("backgroundColor", "white").css(  

                                               "color", "black");  

                                   }).mouseover(  

                                   function() {  

                                       $(this).css("backgroundColor", "blue").css("color",  

                                               "white");  

                                   }).click(function() {  

                               $("#key").val($(this).find("td").eq(0).html());  

                               del();  

                           });  

                             

                           var td1 = $("<td/>").html(array[i]).css("fontSize", "12px")  

                                   .css("margin", "5 5 5 5");  

                           tr.append(td1);  

                           table.append(tr);  

                           $("#newDiv").append(table);  

                       }  

                   }  

               }  

         </script>  

       </head>  

     

       <body>  

         <h1>Google搜索</h1>  

          <div style="margin-top: 20px; margin-left: 30px">  

             请输入搜索关键字:  

              <input name="key" id="key" onkeyup="vchange()" style="width: 300">  

              <input type="button" value="Goolge一下">  

          </div>  

      </body>  

 </html>