ASP.NETAutocomplete control
分享一个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的更多相关文章
- ASP.NET项目中使用CKEditor +CKFinder 实现上传图片
CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...
- ASP.NET 文本编辑器使用(CKEditor)与上传图片
CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 方法一.在ASP.NET工程中添加CKE ...
- 在ASP.NET项目中使用CKEditor
CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...
- Edit Individual GridView Cells in ASP.NET
Edit individual GridView cells without putting the entire row into edit mode.Examples using the SqlD ...
- Ajax Control Toolkit 34个服务器端控件的使用
摘自:http://blog.csdn.net/yaoshuyun/article/details/2218633 1. Accordion[功能概述] Accordion可以让你设计多个panel ...
- Asp.net网页中DataGridView数据导出到Excel
经过上网找资料,终于找到一种可以直接将GridView中数据导出到Excel文件的方法,归纳方法如下: 1. 注:其中的字符集格式若改为“GB2312”,导出的部分数据可能为乱码: 导出之前需要关闭分 ...
- 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 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q52-Q55)
Question 52You are responsible for rebranding the My Sites section of a corporate SharePoint 2010 fa ...
- 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.首先排除数据库中读取加密后的字段是否被强制截断. 2.AES加密后的byte[]首先应用base64( Convert.ToBase64String)编码一次,若直接用utf8的话会报上述错误,若 ...
- 异步FIFO格雷码与空满
在传递读写时钟域的指针使用格雷码来传递,如何把二进制转换为格雷码,格雷码是如何判断读空写满呢? 二进制码转换成二进制格雷码,其法则是保留二进制码的最高位作为格雷码的最高位,而次高位格雷码为二进制码的高 ...
- HDFS高级开发培训课程之HDFS开发实例课件
前言: 刚刚完成的HDFS高级开发培训课程课件中的一个章节,不知道PPT,如何导出HTML格式,只好批量导出图片,贴图了. 连接管理:建立连接.断开连接.设置连接参数 文件操作:浏览文件.上传文件.下 ...
- virtualbox centos 网络配置
https://www.centos.bz/2017/08/virtualbox-centos7-nat-bridge/
- eclipse JDK 下载 and 安装 and 环境配置
eclipse和JDK软件下载 链接:https://pan.baidu.com/s/1bpRHVIhNtK9_FMVbi34YUQ 密码:y3xr eclipse和JDK这两个软件是配套使用的,适用 ...
- PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
这篇文章主要介绍了PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别,本文给出了这两个参数的5个区别,需要的朋友可以参考下 虽然nos ...
- php 数组随机取值
array_rand()在你想从数组中取出一个或多个随机的单元时相当有用.它接受 input 作为输入数组和一个可选的参数 num_req,指明了你想取出多少个单元 - 如果没有指定,默认为 1. a ...
- jQuery更新
jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行 ...
- 显式锁(三)读写锁ReadWriteLock
前言: 上一篇文章,已经很详细地介绍了 显式锁Lock 以及 其常用的实现方式- - ReetrantLock(重入锁),本文将介绍另一种显式锁 - - 读写锁ReadWriteLock. ...
- ORACLE常用数值函数、转换函数、字符串函数介绍
ORACLE常用数值函数.转换函数.字符串函数介绍. 数值函数: abs(m) m的绝对值 mod(m,n) m被n除后的余数 power(m,n) m的n次方 round(m[,n]) m四舍五入至 ...