ajax 框架autocompleteextender实现自动完成功能

ajax 框架autocompleteextender实现自动完成功能

需要一个WebService 我也懒得改名子,就直接叫WebService.asmx; 为什么要用WebService? 其实我也不太清楚,只知道AutoCompleteExtender需要三个最为关键的属性:

ServicePath="WebService.asmx" 

ServiceMethod="GetWordList"

TargetControlID="txtText"

 

如果知道这三个属性的话,也许就清楚为什么要用WebService了,ServicePath:就是WebService的路径,ServiceMethod:WebService中的方法名称,TargetControlID就是要对哪个控件实现自动完成效果(说的有点不清楚,但明白是什么意思就行了);

代码如下:

View Code using System;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using CommonUtility;

namespace GridView入库单管理
{
/// <summary>
/// WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public String[] GetWordList(string prefixText, int count)
{
string sql = string.Format("select top {0} * from InBill where saleName like '%" + @prefixText + "%'", @count);

SqlParameter[] paras = new SqlParameter[]
{
new SqlParameter("@prefixText",prefixText),
new SqlParameter("@count",count)
};

DataTable table = SQLHelper.GetDateSet(sql, CommandType.Text, paras);
string[] arr = new string[table.Rows.Count];
if (table != null)
{
for (int i = 0; i < table.Rows.Count; i++)
{
arr[i] = table.Rows[i]["saleName"].ToString();
}
}
return arr;
}
}
}

 

SQL语句:在声名方法的时候,Count就是为了这个时候用的,AutoCompleteExtender 中加上CompletionSetCount="5" 的时候, 就有用了,它是什么意思? 他就是自动完成的时候,显示多少条数据用的,如果不写,默认是10;也就是说,下拉列表中会出现10条数据;如果定义完以后,在这里就可以将Count传进去了;

string sql = string.Format("select top {0} * from InBill where saleName like '%" + @prefixText + "%'", @count);

 

string[] arr = new string[table.Rows.Count]; //定义一个字符串类型的数组,让他的长度等于我们查出来的table的行数;紧接着就要遍历table,把每行的数据都填充到数组中去;

 

arr[i] = table.Rows[i]["saleName"].ToString(); saleName是数据库教程中的字段名,你这里绑定的是哪个字段,自动完成的时候就会显示哪个字段的值;

 

Aspx页面代码片段:

<asp教程:ScriptManager ID="ScriptManager1" runat="server" />
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
CompletionInterval="500" EnableCaching="false" ServiceMethod="GetWordList" ServicePath="WebService.asmx"
TargetControlID="txtText" CompletionSetCount="5" />
<asp:TextBox ID="txtText" runat="server"></asp:TextBox>

 

首先需要一个ScriptManager,这个是必须的,下面解释一下AutoCompleteExtender中各个属性的意思;

 

MinimumPrefixLength : 就是最小输入几个字符的时候弹出自动完成;

CompletionInterval:自动完成时间间隔;

EnableCaching:是否启用缓存;

ServiceMethod:WebService中的方法名称;

ServicePath:WebService路径;

TargetControlID:绑定的控件;

CompletionSetCount:显示自动完成的行数;

一个详细的实例

功能:

         可以辅助TextBox控件自动输入,如在google中搜索时。

属性:

         TargetControlID:指定将被辅助完成自动输入的控件ID,这里的控件只能是TextBox;

  ServicePath:指出提供服务的WEB服务路径,若不指出则ServiceMethod表示本页面对应的方法名;

  ServiceMethod:指出提供服务的方法名;

  MinimumPrefixLength:指出开始提供提示服务时,TextBox控件应有的最小字符数,默认为3;

  CompletionSetCount:显示的条数,默认为10;

  EnableCaching:是否在客户端缓存数据,默认为true;

  CompletionInterval:从服务器读取数据的时间间隔,默认为1000,单位:毫秒。

代码实例:

 ASPX页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>AutoComplete server control</title>

</head>

<body>

    <form id="form1" runat="server">

        <asp:ScriptManager runat="server" ID="ScriptManager1" />

        <cc1:AutoCompleteExtender

            ID="AutoCompleteExtender1"

            runat="server"

            ServicePath="AutoComplete.asmx"           

            TargetControlID="TextBox1"            

            ServiceMethod="GetWordList"

            MinimumPrefixLength="1"

            EnableCaching ="true"

            CompletionSetCount="12"

            CompletionInterval="1000">                      

        </cc1:AutoCompleteExtender>

           

        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

       

 

    </form>  

</body>

</html>

编写相应的webservices

public class AutoComplete : System.Web.Services.WebService {

 

    public AutoComplete () {

 

        //Uncomment the following line if using designed components

        //InitializeComponent();

    }

 

    private static string[] autoCompleteWordList = null;

 

    [WebMethod]

    public String[] GetWordList(string prefixText, int count)

    {

        if (autoCompleteWordList == null)

        {

            string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/words.txt"));

            Array.Sort(temp, new CaseInsensitiveComparer());

            autoCompleteWordList = temp;

        }

 

        int index = Array.BinarySearch(autoCompleteWordList, prefixText,

          new CaseInsensitiveComparer());

        if (index < 0)

        {

            index = ~index;

        }

 

        int matchingCount;

        for (matchingCount = 0;

             matchingCount < count && index + matchingCount <

             autoCompleteWordList.Length;

             matchingCount++)

        {

            if (!autoCompleteWordList[index +

              matchingCount].StartsWith(prefixText,

              StringComparison.CurrentCultureIgnoreCase))

            {

                break;

            }

        }

 

        String[] returnValue = new string[matchingCount];

        if (matchingCount > 0)

        {

            Array.Copy(autoCompleteWordList, index, returnValue, 0,

              matchingCount);

        }

        return returnValue;

    }

}

 

  在这里需要注意以下几点:

   1.由于该WEB服务是为Ajax框架提供服务的,因此在类声明之前得加上属性声明:

     [System.Web.Script.Services.ScriptService]

   2.特别需要注意的是GetTextString这个方法。凡是为AutoCompleteExtender控件提供服务的方法都必需完全满足以下三个条件:

     A.方法的返回类型必需为:string [];

     B.方法的传入参数类型必需为:string  ,   int;

     C.两个传入参数名必需为:prefixText  ,  count。

在App_Data下添加words.txt。

access control list (ACL)

 

ADO.NET

 

aggregate event

 

alpha channel

 

anchoring

 

antialiasing

 

application base

 

application domain (AppDomain)

 

application manifest

 

application state

 

ASP.NET

 

ASP.NET application services database

 

ASP.NET mobile controls

 

ASP.NET mobile Web Forms

 

ASP.NET page

 

ASP.NET server control

 

ASP.NET Web application

 

时间: 2024-07-30 15:47:48

ajax 框架autocompleteextender实现自动完成功能的相关文章

django ajax提交评论并自动刷新功能的实现代码

在试了很多次了,终于搞定了,上代码吧.(我用的是jQuery的ajax,不是原生的) js代码: <script> $(document).ready(function () { getcomment(); $('.comment-box button').click(function () { var comment_text = $('.comment-box textarea').val(); $.ajax({ type: 'POST', url: '/bbs/article/{{ ar

jQuery的Ajax的自动完成功能控件简要说明_jquery

jQuery的Ajax的自动完成功能允许您轻松地创建自动完成/自动提示框的文本输入字段.它始建集中表现为每一个查询缓存被从本地缓存中相同的重复的查询结果.如果没有特定查询的结果,它停止发送请求到服务器的其他查询. Ajax的自动完成的jQuery的是麻省理工学院风格的许可证的条款下自由分发.这是目前支持的浏览器:IE 7 +,FF 2 +,Safari 3以上,谷歌9 +. 要求:jQuery框架下载链接:http://www.devbridge.com/projects/autocomplet

Ajax自动完成功能实例

ajax [导读]本文介绍如何实现Ajax自动完成的功能,即Autocomplete,举例在Search框内输入一个产品型号,就可以看见效果了. 自动完成的功能即Autocomplete,具体的例子可以在这里看: http://www.b2c-battery.co.uk 在Search框内输入一个产品型号,就可以看见效果了. 这里用到了一个开源的代码: AutoAssist ,有兴趣的可以看一下. 以下为代码片断: 不知道为什么不能用keywords做文本框的名字,我试了很久,后来还是用keyw

jquery ajax-请问使用SSH框架结合ajax后,怎么实现查询功能?

问题描述 请问使用SSH框架结合ajax后,怎么实现查询功能? 请问使用SSH框架结合ajax后,怎么实现查询功能?就是,把查询条件用jquery ajax提交, 然后加载table:我现在是能提交,但不知道怎么返回list加载到table中?谢谢! 解决方案 在AJAX中解析json,然后传到JSP页面 解决方案二: 后台用输出流,前端用Jason 解析 解决方案三: <result name='success' type='json'>list</result> 然后在ajax

请问怎样让webbrowser刷新指定的框架,及有自动完成功能

问题描述 我用的是vs2005在webbrowser里有好多框架,怎样才能指定刷新一个呢?自动完成功能我看过蒋晟的帖子,可惜没看懂...5555 解决方案 解决方案二:没人帮我吗.....55555解决方案三:自动完成功能?+++++++++++++++++是什么功能?解决方案四:在那个框架的页面里自己定时刷新呀,也可以通过框架id或名称定位到那个框架,刷新其内容.解决方案五:和其他控件一样,我们可以用WebBrowser控件来构筑我们的Windowsform应用程序.从工具箱中选择Window

Yii2框架实现登录、退出及自动登录功能的方法详解

本文实例讲述了Yii2框架实现登录.退出及自动登录功能的方法.分享给大家供大家参考,具体如下: 自动登录的原理很简单.主要就是利用cookie来实现的 在第一次登录的时候,如果登录成功并且选中了下次自动登录,那么就会把用户的认证信息保存到cookie中,cookie的有效期为1年或者几个月. 在下次登录的时候先判断cookie中是否存储了用户的信息,如果有则用cookie中存储的用户信息来登录, 配置User组件 首先在配置文件的components中设置user组件 'user' => [ '

Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

动态验证:(不需要建Model模型) 1.建一个控制器,做表单操作(包含验证) <?php namespace Biaodan\Controller; use Think\Controller; class BiaodanController extends Controller { public function test() { if(empty($_POST))//如果$_POST空,显示添加页面, { $this->show(); } else //如果$_POST不为空,走验证,验证

开发自己的Web服务处理程序(以支持Ajax框架异步调用Web服务方法)

当你添加Asp.net AJAX功能到你的Web程序的时候,你需要在Web.config中做一些改变,需要你显式地移除默认的ASMX处理程序并且添加asp.net ajax框架自己的脚本处理器来作为ASMX处理程序.在上一篇异步调用Web服务方法中,我们谈论过,ajax框架的asmx(ScriptHandler)是不支持异步调用Web服务方法的,所以为了让asp.netajax支持异步Web方法调用,我们需要避开该处理器,以提供自定义的处理器来取代它. Asp.netAJAX框架的ASMX处理器

AJAX框架&amp;简介

ajax|ajax框架 Ajax,使用它可以构建更为动态和响应更灵敏的Web应用程序.该方法的关键在于对浏览器端的JavaScript.DHTML和与服务器异步通信的组合.本文也演示了启用这种方法是多么简单:利用一个Ajax框架(指DWR)构造一个应用程序,它直接从浏览器与后端服务进行通信.如果使用得当,这种强大的力量可以使应用程序更加自然和响应灵敏,从而提升用户的浏览体验. 该应用程序中所使用的示例代码已打包为单独的WAR文件,可供下载. 简介 术语Ajax用来描述一组技术,它使浏览器可以为用