开发者社区> 狼人2007> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

一起谈.NET技术,asp.net Ajax ---AutoComplete控件使用

简介: 简介:     AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便.  重要属性:     1、TargetControlID:指定要实现提示功能的控件。
+关注继续查看

 简介:
    AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便.

 重要属性:
    1、TargetControlID:指定要实现提示功能的控件。
    2、ServicePath:WebService的路径,提取数据的方法是写在一个WebService中的。
    3、ServeiceMethod:写在WebService中的用于提取数据的方法的名字。
    4、MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果。
    5、CompletionSetCount:设置提示数据的行数。
    6、CompletionInterval:从服务器获取书的时间间隔,单位是毫秒。
示例
打开vs2005创建一个AjaxControlToolKit网站。
在网站的App_Data文件夹下添加文本文件TextFile.txt,并在其中添加数据,如下


1 oec2003
2 oec2004
3 oec2005
4 oec2006
5 oec2007

   在网站的根目录下添加一个Web服务,命名为oec2003_AutoComplete,系统自动将Web服务两个部分,设计部分oec2003_AutoComplete.asmx和代码部分oec2003_AutoComplete.cs,其中oec2003_AutoComplete.cs文件自动放入到App_Code目录下。打开oec2003_AutoComplete.cs文件,添加获取数据的方法GetCompleteList,代码如下:

 1using System;
 2using System.Web;
 3using System.Collections;
 4using System.Web.Services;
 5using System.Web.Services.Protocols;
 6using System.IO;
 7
 8
 9/**//// <summary>
10/// AutoComplete 的摘要说明
11/// </summary>

12[WebService(Namespace = "http://tempuri.org/")]
13[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14[System.Web.Script.Services.ScriptService]
15public class AutoComplete : System.Web.Services.WebService {
16
17    public AutoComplete () {
18
19        //如果使用设计的组件,请取消注释以下行 
20        //InitializeComponent(); 
21    }

22
23    [WebMethod]
24    public string HelloWorld() {
25        return "Hello World";
26    }

27    /**//// <summary>
28    /// 获取数据的方法GetCompleteList
29    /// </summary>

30    //定义静态数组用于保存获取的数据
31    private static string[] autoCompleteWordList = null;
32    [WebMethod]
33    public String[] GetCompleteList(string prefixText, int count)
34    {
35        if (autoCompleteWordList == null)
36        {
37            string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/TextFile.txt"));
38            Array.Sort(temp, new CaseInsensitiveComparer());
39            autoCompleteWordList = temp;
40        }

41
42        int index = Array.BinarySearch(autoCompleteWordList, prefixText, new CaseInsensitiveComparer());
43        if (index < 0)
44        {
45            index = ~index;
46        }

47
48        int matchingCount;
49        for (matchingCount = 0; matchingCount < count && index + matchingCount < autoCompleteWordList.Length; matchingCount++)
50        {
51            if (!autoCompleteWordList[index + matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))
52            {
53                break;
54            }

55        }

56        String[] returnValue = new string[matchingCount];
57        if (matchingCount > 0)
58        {
59            Array.Copy(autoCompleteWordList, index, returnValue, 0, matchingCount);
60        }

61        return returnValue;
62    }

63
64}

由于在上面的代码中使用了File类,所以应该添加如下代码:

using System.IO;

 因为需要在客户端调用Web服务,还需要添加如下代码

[System.Web.Script.Services.ScriptService]

保存Web 服务的代码
 打开根目录下默认生成的Default.aspx
在页面中拖拽一个TextBox控件和一个AutoCompleteExtender控件。
在属性窗口设置AutoCompleteExtender控件的属性,如下

<ajaxToolkit:AutoCompleteExtender 
            ID
="AutoCompleteExtender1" 
            runat
="server" 
            ServiceMethod
="GetCompleteList" 
            ServicePath
="oec2003_AutoComplete.asmx" 
            Enabled
="true" 
            MinimumPrefixLength
="2" 
               CompletionSetCount="10"
            TargetControlID
="TextBox1">
</ajaxToolkit:AutoCompleteExtender>

在Web服务中的count参数的值是取CompletionSetCount属性的值。
保存设计的页面,将默认页面设置为起始页,按F5运行后在文本框中输入oe,就能看到想要的结果。

代码下载

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【AJAX】AJAX技术详细解析以及实例(2)
【AJAX】AJAX技术详细解析以及实例
59 0
【AJAX】AJAX技术详细解析以及实例(1)
【AJAX】AJAX技术详细解析以及实例
53 0
【AJAX】AJAX技术详细解析以及实例
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 Ajax技术介绍: 全称: Asynchronized(异步) Javascript And Xml 技术组成有: Javascript、DOM、CSS 和 XMLHttpRequest AJAX = 异步 JavaScript 和 XML。
1103 0
jQuery Ajax 简单的实现跨域请求
jQuery Ajax 简单的实现跨域请求
126 0
APS.NET和MVC3解决jQuery中Ajax的乱码问题
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 转自http://blog.csdn.net/allsharps/article/details/6875419 解决jQuery中Ajax的乱码问题   $(document).
826 0
asp.net jquery ajax数据操作 DropDownList级联
1、定义一个类 CityCounty.cs文件,如下: using System; using System.
777 0
javascript jquery json ajax 关系
javascript是一种动态语言,现在主要作为浏览器的一种操控语言在全世界范围内使用,可以通过它操纵页面元素来实现一些浏览器客户端高级效果   jquery是一种javascript类库,他主要负责屏蔽浏览器兼容问题,提供快速的dom查询,还有简单方便的dom操作方法,减轻web客...
921 0
MVC TIP3:JQuery通过Ajax提交表单并返回结果
在开始介绍使用JQuery提交表单之前,先看一下非Ajax提交表单的形式,如下: 1:非Ajax 前台: 对应后台: 2:JQuery之Ajax 在介绍使用JQuery提交表单前,我们需要首先引用jquery.form.js,它来自于http://www.malsup.com/jquery/form/,至此,我们需要引用的JS文件有: 功能要求:Ajax提交表单,在控制器HelloWorld4Controller中处理请求,并返回若干数据,数据格式为JSON。
737 0
+关注
狼人2007
个人对技术的追求:代码少而精捍;思路清晰美观;可扩展好维护;技术驱动商业; 人生格言:只要你有信念,有追求,并且坚持,那你一定比随波逐流,行得远行得正...
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载