分享一个Ajax autocomplete control,

原文链接:http://forums.asp.net/t/1157595.aspx

首先,引入ScriptManager

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

Create 一个TextBox, 这里我把它命名为txtAutoComplete

<asp:TextBox ID="txtAutoComplete" runat="server" Width="98%" Text=''></asp:TextBox>

然后,拖入一个AutoCompleteExtender, 设置

TargetControlID="txtAutoComplete", 将AutoComplete control 和textBox链接起来
ServicePath="AutoCompletedWebService.asmx", 指定WebService
ServiceMethod="LoadValues", 指定方法
MinimumPrefixLength="2", 输入多少字符时,开始执行方法,这里指定的2个
CompletionSetCount="20",指定最多多少个值会被列出来
UseContextKey="true", 指定是否使用输入作为参数
CompletionInterval="100", 指定Ajax post 时间
CompletionListCssClass="autocomplete_completionListElement" 设置List的样式
CompletionListItemCssClass="autocomplete_listItem",设置每个ITEM的样式
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" , 设置高亮样式
FirstRowSelected="true",设置首行选中效果
EnableCaching="true" ,使用Cache
OnShow,OnHide, 设置动画效果
<cc1:AutoCompleteExtender ID="aceMinSupplierID" runat="server" TargetControlID="txtAutoComplete" BehaviorID="AutoCompleteEx"
ServicePath="AutoCompletedWebService.asmx" ServiceMethod="LoadValues" MinimumPrefixLength="2"
CompletionSetCount="20" UseContextKey="true" Enabled="true" CompletionInterval="100"
CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" FirstRowSelected="true"
EnableCaching="true" >
<Animations>
<OnShow>
<Sequence>
<%-- Make the completion list transparent and then show it --%>
<OpacityAction Opacity="0" />
<HideAction Visible="true" /> <%--Cache the original size of the completion list the first time
the animation is played and then set it to zero --%>
<ScriptAction Script="
// Cache the size and setup the initial size
var behavior = $find('AutoCompleteEx');
if (!behavior._height) {
var target = behavior.get_completionList();
behavior._height = target.offsetHeight - 2;
target.style.height = '0px';
}" /> <%-- Expand from 0px to the appropriate size while fading in --%>
<Parallel Duration=".4">
<FadeIn />
<Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
</Parallel>
</Sequence>
</OnShow>
<OnHide>
<%-- Collapse down to 0px and fade out --%>
<Parallel Duration=".4">
<FadeOut />
<Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
</Parallel>
</OnHide>
</Animations>
</cc1:AutoCompleteExtender>

CSS样式设计

 /*AutoComplete flyout */
.autocomplete_completionListElement
{
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor :default;
overflow : auto;
height : 200px;
text-align : left;
list-style-type : none;
padding-left:0px;
} /* AutoComplete highlighted item */ .autocomplete_highlightedListItem
{
background-color: #ffff99;
color: black;
padding: 1px;
} /* AutoComplete item */ .autocomplete_listItem
{
background-color : window;
color : windowtext;
padding : 1px;
}

Web Service 代码,Imports System.Web.ServicesImports System.Web.Services.Protocols

Imports System.ComponentModel' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class AutoCompletedWebService
Inherits System.Web.Services.WebService <WebMethod()> _
Public Function HelloWorld() As String
Return "Hello World"
End Function <WebMethod()>
<System.Web.Script.Services.ScriptMethod()> _
Public Function LoadMinSupplierID(ByVal prefixText As String, ByVal contextKey As String) As String()
Dim list As New List(Of String)()
list.Clear()
......
     取得数据
     ......
Return list.ToArray()
End Function
End Class

ASP.NETAutocomplete control的更多相关文章

  1. ASP.NET项目中使用CKEditor +CKFinder 实现上传图片

    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...

  2. ASP.NET 文本编辑器使用(CKEditor)与上传图片

    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 方法一.在ASP.NET工程中添加CKE ...

  3. 在ASP.NET项目中使用CKEditor

    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...

  4. Edit Individual GridView Cells in ASP.NET

    Edit individual GridView cells without putting the entire row into edit mode.Examples using the SqlD ...

  5. Ajax Control Toolkit 34个服务器端控件的使用

    摘自:http://blog.csdn.net/yaoshuyun/article/details/2218633 1. Accordion[功能概述] Accordion可以让你设计多个panel  ...

  6. Asp.net网页中DataGridView数据导出到Excel

    经过上网找资料,终于找到一种可以直接将GridView中数据导出到Excel文件的方法,归纳方法如下: 1. 注:其中的字符集格式若改为“GB2312”,导出的部分数据可能为乱码: 导出之前需要关闭分 ...

  7. A Complete List of .NET Open Source Developer Projects

    http://scottge.net/2015/07/08/a-complete-list-of-net-open-source-developer-projects/?utm_source=tuic ...

  8. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q52-Q55)

    Question 52You are responsible for rebranding the My Sites section of a corporate SharePoint 2010 fa ...

  9. Step-by-Step Guide to Portal Development for Microsoft Dynamics CRM - 摘自网络

    The Challenge Oftentimes in the world of Dynamics CRM, the need arises for non-CRM users to gain acc ...

随机推荐

  1. HighCharts定时刷新图表

    假设图表容器的id为exChart,如下: <div style="height:450px;" id="chart">   1. 首先在serie ...

  2. CentOS启动网络提示connect: Network is unreachable(配置静态路由)

    ls /etc/sysconfig/network-script/ifcfg-eth0 一.看是否在上述目录下存在ifcfg-eth0 这个文件,若存在则按下面的步骤操作: 1.手工配置ip看能不能配 ...

  3. 如何为javascript代码编写注释以支持智能感知

    在使用Visual Studio做开发的时候,智能感知是非常方便的.从VS2008开始,提供了对javascript的智能感知支持.例如 上述代码中,我们先用document对象的getElement ...

  4. 在启动Windows Process Activation Service时,出现错误13:数据无效

    在启动Windows Process Activation Service时,出现错误13:数据无效 1.错误原因: 当Windows Process Activation Service从C:\Wi ...

  5. linux 信号处理 四

    一.信号生命周期 从信号发送到信号处理函数的执行完毕 对于一个完整的信号生命周期(从信号发送到相应的处理函数执行完毕)来说,可以分为三个重要的阶段,这三个阶段由四个重要事件来刻画:信号诞生:信号在进程 ...

  6. js jquery 设置cookie

    转自http://yaoqianglilan.blog.163.com/blog/static/70978316201091810435251/ 本人亲测setcookie() getcookie() ...

  7. bzoj 3413: 匹配

    Description Input 第一行包含一个整数n(≤100000). 第二行是长度为n的由0到9组成的字符串. 第三行是一个整数m. 接下来m≤5·10^4行,第i行是一个由0到9组成的字符串 ...

  8. 1006 Sign In and Sign Out (25 分)

    1006 Sign In and Sign Out (25 分) At the beginning of every day, the first person who signs in the co ...

  9. php array_flip() 删除数组重复元素——大彻大悟

    1. php array_flip() 删除数组重复元素,如果用于一维索引数组,好理解. [root@BG-DB:~]$more arr.php  <?php         $arr = ar ...

  10. 特征选择:方差选择法、卡方检验、互信息法、递归特征消除、L1范数、树模型

    转载:https://www.cnblogs.com/jasonfreak/p/5448385.html 特征选择主要从两个方面入手: 特征是否发散:特征发散说明特征的方差大,能够根据取值的差异化度量 ...