zoukankan      html  css  js  c++  java
  • AutoComplete实现类似Google的输入提示

        AutoComplete 是一个可以附属到任何一个 TextBox 控件上的 ASP.NET AJAX 扩展控件,它可以帮助页面用户的文本框输入, 显示提示信息,该信息可以根据用户的输入进行设置。 
        提示输入信息将根据与 AutoComplete 配合的 Web Service 来提供,并显示于 TextBox 的左下方。
    在上面的例子中,和 AutoComplete 所配合的 TextBox 将提示以 TextBox 中的内容为开头的输入,有点类似模拟数据库中的 Like 检索结果。 当你在 TextBox 的输入超过指定的最小长度时,提示框将显示以其输入为开头的词组和短语。

    AutoComplete 控件属性将被初始化如下面的示例代码所示,斜体属性为可选属性

    <ajaxToolkit:AutoCompleteExtender
    runat="server"
    ID="autoComplete1"
    TargetControlID="myTextBox"
    ServiceMethod="GetCompletionList"
    ServicePath="AutoComplete.asmx"
    MinimumPrefixLength="2"
    CompletionInterval="1000"
    EnableCaching="true"
    CompletionSetCount="20"
    CompletionListCssClass=
    "autocomplete_completionListElement"
    CompletionListItemCssClass=
    "autocomplete_listItem"
    CompletionListHighlightedItemCssClass=
    "autocomplete_highlightedListItem"
    DelimiterCharacters=";, :">
    <Animations>
    <OnShow> ... </OnShow>
    <OnHide> ... </OnHide>
    </Animations>
    </ajaxToolkit:AutoCompleteExtender>
        1、TargetControlID:指定要实现提示功能的控件。     2、ServicePath:WebService的路径,提取数据的方法是写在一个WebService中的。     3、ServeiceMethod:写在WebService中的用于提取数据的方法的名字。     4、MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果。     5、CompletionSetCount:设置提示数据的行数。     6、CompletionInterval:从服务器获取书的时间间隔,单位是毫秒。
    WebService示例代码:
    private static string[] m_autoCompleteWordList = null;

        [WebMethod]
        
    public String[] GetWordList(string prefixText, int
     count)
        
    {
            
    if (m_autoCompleteWordList == null
    )
            
    {
                
    string[] temp = File.ReadAllLines(Server.MapPath("~/App_Data/SuggestWords.txt"
    ));
                Array.Sort(temp, 
    new
     CaseInsensitiveComparer()); 
                m_autoCompleteWordList 
    =
     temp;
            }


            
    int index = Array.BinarySearch(m_autoCompleteWordList, prefixText, new CaseInsensitiveComparer());
            
    if (index < 0
    )
            
    {
                index 
    = ~
    index;
            }


            
    int matchingCount;
            
    for (matchingCount = 0; matchingCount < count && index + matchingCount < m_autoCompleteWordList.Length; matchingCount++
    )
            
    {
                
    if (!m_autoCompleteWordList[index +
     matchingCount].StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase))
                    
    break
    ;
            }


            String[] returnValue 
    = new string[matchingCount];
            
    if (matchingCount > 0
    )
            
    {
                Array.Copy(m_autoCompleteWordList, index, returnValue, 
    0
    , matchingCount);
            }

            
    return returnValue;
        }
    此示例为读一个文件,实际应从数据库中查找。
    注意:
    你可以根据你的需要任意替换方法名“GetCompletionList”,但是返回值和参数必须保持一致

  • ServicePath - Web Service 的路径,如果你没有指定该路径,那么 ServiceMethod 属性必须是当前页面的一个被申明成 Web Service Method 的页面方法。
  • ContextKey - User/Page 提供的 Web Service 重载方法(可选),如果该属性被指定,那么在参数表中需要指定相应的以 contextKey 命名的字符串参数。
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public string[] GetCompletionList(
    string prefixText, int count,
    string contextKey) { ... }
    注意:
    你可以根据你的需要任意替换方法名“GetCompletionList”,但是返回值和参数必须保持一致

  • UseContextKey - 如果 ContextKey 被设置,那么该属性将被自动设置。请注意上面的增加参数约定
  • MinimumPrefixLength - TextBox 中最少的字符个数以满足触发调用 Web Service 获得提示的条件
  • CompletionInterval - 以微秒表示的调用 Web Service 获得提示信息的间隔时间
  • EnableCaching - 标志是否使用客户端缓存
  • CompletionSetCount - 从 Web Serivce 获得的提示数据的个数
  • CompletionListCssClass - 提示信息框的 Css 样式
  • CompletionListItemCssClass - 提示信息框中的每个数据项的 Css 样式
  • CompletionListHighlightedItemCssClass - 提示信息中当某一个数据项被选中的时候所呈现的 Css 样式
  • DelimiterCharacters - 可以指定若干个字符来切分输入框中的字符,作为不同的数据提示检索条件
  • FirstRowSelected - 标志提示信息框中是否默认第一条数据项被选中
  • Animations - AutoComplete 显示动画。请点击应用动画动画引用获得更多的信息。
    • OnShow - 当显示提示信息的时候出现的动画。动画可以应用 <HideAction Visible="true" />来控制显示提示框的其可视化信息。
    • OnHide - 当提示信息框被关闭时出现的动画
查看全文
  • 相关阅读:
    前端网络安全——其他安全问题
    前端网络安全——密码安全
    前端网络安全——接入层注入
    前端网络安全——点击劫持
    mac重装系统后安装列表
    manjaro踩坑记录
    JavaScript学习过程中遇到的一些坑
    JavaScript学习
    [解决方法] 如何在没有屏幕的情况下训练一些需要显示的程序
    Python中*号的作用详解
  • 原文地址:https://www.cnblogs.com/yangbin1005/p/995525.html
  • Copyright © 2011-2022 走看看