zoukankan      html  css  js  c++  java
  • Atlas学习手记(25):使用行为增强用户界面(五):AutoComplete Behavior

    前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。

     

    主要内容

    1AutoComplete Behavior简介

    2.完整示例

     

    一.AutoComplete Behavior简介

    前面说过使用服务端的AutoComplete Extender,本文看一下如何使用AutoComplete Behavior来实现自动完成功能。AutoComplete Behavior完全使用客户端脚本实现,它的基本定义形式如下:

    <textBox>

        
    <behaviors>

            
    <autoComplete

                
    completionInterval="1000|interval between drop-down updates"

                completionList
    ="HTML element used for drop-down box"

                completionSetCount
    ="10|number of values shown in drop-down list"

                dataContext
    ="source for data binding operations"

                id
    ="identifier for looking up the component by name"

                minimumPrefixLength
    ="3|minimum prefix length"

                propertyChanged
    ="event handler"

                serviceMethod
    ="name of auto completion Web service method"

                serviceURL
    ="URL of auto completion Web service"

            
    >

                
    <bindings>

                    
    <!-- bindings -->

                
    </bindings>

                
    <propertyChanged>

                    
    <!-- actions -->

                
    </propertyChanged>

            
    </autoComplete>

        
    </behaviors>

    </textBox>

    其中它的属性解释如下(Dflying Chen):

    1serviceURL:提供自动完成功能的服务器端Web Service的路径。

    2serviceMethod:提供自动完成功能的服务器端的Web Method名称,该Web Method应该有类似的签名:public String[] GetSuggestions(string prefixText, int count)。其中prefixText为客户端传入的当前输入的字符串,count为返回的提示列表中的最大条目数,同时它应该返回一个string数组,表示提示列表。

    3minimumPrefixLength:开始提供自动完成列表的文本框内最少的输入字符数量。默认值为3。如果用户刚刚输入一两个字母,您就迫不及待的提供给他一长串的列表,这既没什么意义,也会极大浪费服务器与网络资源。只有用户输入了等于或超过某个数目(由本属性设定)时,给出的建议才是有价值的,Atlas也才会查询服务器端的相应方法并显示给用户提示列表。

    4completionInterval:每次查询后台的间隔时间,默认值是1000(毫秒)。如果该值太大,则给用户带来程序反应迟钝的印象,如果太小,则加重服务器与网络负担。一般来讲,500-2000是一个比较合理的值。

    5completionList:显示提示列表的DOM元素。如果不指定,Atlas会自动在相关的TextBox下面创建一个DIV来显示。一般情况下我们无须指定这个属性。

    6completionSetCount:提示列表中的最大项目数,默认值为10

    二.完整示例

    下面看一个完整的示例,前面的两步跟AutoComplete Extender是一样的,也需要准备相关的数据和编写WebService

    1.准备相关的数据源,这里使用一个本文文件作为我们的数据源,当然你也可以从数据库中读数据,拷贝如下单词为words.txt并保存在App_Data文件夹:

    单词库

    2.编写Web Service用来提供单词列表,这里我们并不关心具体的实现逻辑,只关心Web Method接收什么样的参数,最后返回一个string数组即可。

    using System;

    using System.IO;

    using System.Web;

    using System.Collections;

    using System.Collections.Generic;

    using System.Threading;

    using System.Web.Services;

    using System.Web.Services.Protocols;

    using System.Xml.Serialization;


    /// <summary>

    /// Summary description for AutoCompleteService

    /// </summary>


    [WebService(Namespace 
    = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo 
    = WsiProfiles.BasicProfile1_1)]

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


        
    public AutoCompleteService () {


            
    //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;

        }


    }

    3.添加相关的HTML控件,这里用两个,我们分别演示默认的方式和自定义Drop-Down的方式:

    <div>

    <h3>AutoComplete Behavior Example</h3>

    默认的方式
    <br />

    <input id="textBox1" type="text" style=" 300px;" /><br /><br />

    自定义Drop-Down
    <br />

    <input id="textBox2" type="text" style=" 300px;" />

    </div>

    <div id="list" style="opacity:0.8;filter:alpha(opacity=75); font-size:10pt; font-family:宋体">

    </div>

    4.编写Atlas脚本,添加两个AutoComplete Behavior,第一个不需要指定completionList,而第二个指定completionList

    <script type="text/xml-script">

        
    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

           
    <components>

               
    <textBox id="textBox1">

                   
    <behaviors>

                       
    <autoComplete 

                          serviceURL
    ="AutoCompleteService.asmx"

                          serviceMethod
    ="GetWordList"

                          minimumPrefixLength
    ="2"

                          completionSetCount
    ="10"

                          completionInterval
    ="500" />

                   
    </behaviors>

               
    </textBox>

               
    <textBox id="textBox2">

                   
    <behaviors>

                       
    <autoComplete 

                          serviceURL
    ="AutoCompleteService.asmx"

                          serviceMethod
    ="GetWordList"

                          minimumPrefixLength
    ="2"

                          completionSetCount
    ="10"

                          completionList
    ="list"

                          completionInterval
    ="500" />

                   
    </behaviors>

               
    </textBox>

           
    </components>

        
    </page>

    </script>

    编译运行后效果如下:

    默认方式


    自定义Drop-Down

    完整示例下载:https://files.cnblogs.com/Terrylee/AutoCompleteBehaviorDemo.rar

  • 相关阅读:
    [转载]小谈网络游戏同步
    [ASE][Daily Scrum]11.06
    [Proposal]Tank Battle——Infinite
    [proposal][app]Watch your time!
    [Proposal]Nano-Diary(纳日记)
    LaTeX中用BibTex管理参考文献
    matlab化简符号表达式
    placeholder颜色变化
    链接图片外边出现蓝框(IE8/IE9/IE10)
    图标排列
  • 原文地址:https://www.cnblogs.com/Terrylee/p/Atlas_AutoComplete_Behavior.html
Copyright © 2011-2022 走看看