十、AutoComplete——自动完成
来源:互联网 发布:餐饮软件安装 编辑:程序博客网 时间:2024/04/30 00:59
AutoComplete自动完成,当用户输入字符后,会自动匹配出可能的结果供用户选择,google或百度的输入框就有这种功能。
举例如下:
1. 拖入一个ScriptManage控件
2. 拖入一个TextBox控件
3. 拖入一个AutoComplete控件:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" //必须、使用自动完成功能的TextBox控件Id
ServicePath="AutoComplete.asmx" //必须、要调用的web服务
ServiceMethod="getUserList" //必须、要调用的web服务中的方法
CompletionSetCount="6" //返回的数据行
MinimumPrefixLength="0" //输入多少个字符就开始调用web服务
CompletionInterval="1000" //每隔多长时间调用一次web服务,单位为毫秒
CompletionListCssClass="autocomplete_completionListElement" //下拉框样式
CompletionListItemCssClass="autocomplete_listItem" //下拉框元素样式
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" //鼠标所在下拉框元素样式
>
</cc1:AutoCompleteExtender>
4. 编写web服务
<%@ WebService Language="C#" Class="AjaxToolkit.AutoComplete" %>
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
namespace AjaxToolkit
{
/// <summary>
///AutoComplete 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
public AutoComplete()
{
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string[] getUserList(string prefixText, int count) //注意此处的参数名和类型必须原封不动否则无法响应
{
count = 100;
string[] strs = new string[count];
for (int i = 0; i < count; i++)
{
strs[i] = prefixText + "_" + i.ToString();
}
return strs;
}
}
}
5. css样式:
.autocomplete_completionListElement
{
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : 'default';
overflow : auto;
height :auto;
max-height:200px;
text-align : left;
list-style-type : none;
}
.autocomplete_listItem
{
border-style : solid;
border :#EAEFF9;
border-width : 1px;
background-color : window;
color : windowtext;
}
.autocomplete_highlightedListItem
{
background-color: #ffff99;
color: black;
padding: 1px;
}
6. 截图如下
- 十、AutoComplete——自动完成
- JQuery.AutoComplete自动完成
- 自动完成插件 autocomplete
- jquery 自动完成 Autocomplete
- jquery autoComplete 自动完成
- AutoComplete - 自动完成插件
- jQuery.Autocomplete 自动完成
- JQUERY autocomplete 自动完成
- JS autocomplete({})自动完成
- jquery.autocomplete 自动完成功能
- jquery autocomplete自动完成功能
- AutoComplete+数据库,自动完成功能
- jquery的自动完成Autocomplete
- jquery.autocomplete自动完成控件
- jQuery – 自动完成(Autocomplete)
- jQuery Autocomplete 自动完成插件
- 黑马学习笔记——jQuery UI Autocomplete 输入中文不自动完成问题解决方案
- Jquery UI简单应用——自动完成(Autocomplete)实现类似百度输入提醒效果
- 比较LINEARLAYOUT和RELATIVELAYOUT在LISTVIEW中的内存耗用
- 九、AsyncFileUpload——异步上传文件
- 软件加密技术和注册机制
- volatile 变量使用指南
- ANT1.7下载以及配置方法
- 十、AutoComplete——自动完成
- 古之成大事者,不唯有超世之才,亦唯有坚忍不拔之志也!
- 看英文pdf文档屏幕取词
- winform的窗体效果图从左到右显示(在父窗体内下显示)
- 十一、Calendar——日期选择控件
- servlet Filter 过滤器
- 十二、CascadingDropDown——级联下拉列表
- Oracle 优化配置 收藏
- 毕业之后