AJax技术

Asp.net Ajax AutoComplete 控件的用法

字号+ 作者:H5之家 来源:H5之家 2015-10-14 10:16 我要评论( )

Asp.net Ajax AutoComplete 控件的用法

      AutoComplete控件是微软提供的ASP.NET AJAX Control Toolkit 中的一个控件,是用来实现类似百度搜索的自动完成效果。

      AutoComplete控件的用法很简单,只要在页面放一个TextBox和AutoComplete控件,另外,还需要一个提供数据列表的WebService就可以了。

      先说这个WebService吧,其实就是用来提供AutoComplete可以使用的数据的,它可以有两种格式,一种是两个参数,另一个是三个参数,它们的返回值均为string[]类型。来一个三个参数的示例吧,两个参数的更简单。

      以下是代码片段:
      [WebService(Namespace = "")] 
      [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
      [System.ComponentModel.ToolboxItem(false)] 
      // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
      [System.Web.Script.Services.ScriptService] 
      public class AutoCompleteService : System.Web.Services.WebService 
      { 
      [System.Web.Services.WebMethod] 
      [System.Web.Script.Services.ScriptMethod] 
      public string[] GetCompletionList(string prefixText, int count, string contextKey) 
      { 
      return new string[] { prefixText + "+" + count.ToString() + "+" + contextKey, "Tom", "Jerry", "Helly", "Jack", }; 
      } 
      }

      第一个参数prefixText为用户输入的字符串

      第二个参数count为要获取的数据行数

      第三个参数contextKey为上下文关键字,也就是说跟当前业务环境相关的数据。

      这里要注意一点,虽然WebService的名称和方法的名称可以自己随便起,但参数名称是固定的,不能乱来,否则是会出问题的。这是跟Javascript传递参数时的调用方式有关,因为Javascript调用时传递的参数是以Key Value Pair方式进行的。

      剩下来就是前台了,在aspx页面中,放一个TextBox控件和一个AutoComplete控件,代码如下:

      以下是代码片段:
      <asp:TextBox runat="server" ID="txtAutoComplete" /> 
      <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCompletionList" 
      ServicePath="/WebService/AutoCompleteService.asmx" Enabled="true" MinimumPrefixLength="1" 
      CompletionSetCount="10" TargetControlID="txtAutoComplete" CompletionInterval="100"> 
      </ajaxToolkit:AutoCompleteExtender>

      除了这些之外,为了传递contextKey参数,还需要为TextBox添加KeyDown事件的处理方法,注意,实在javascript中添加,添加的方法是在后台注册onkeydown事件,并在前台添加onkeydown事件处理函数。具体如下:

      以下是代码片段:
      this.txtAutoComplete.Attributes.Add("onkeydown", "return txtAutoComplete_keydown()");

      js代码如下:

      以下是代码片段:
      function txtAutoComplete_keydown() { 
      var oAutoCompleteControl = $find("AutoCompleteExtender1"); 
      oAutoCompleteControl.set_contextKey("Hello"); 
      }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评