开箱即用，script.aculo.us支持两个自动完成源：

• 远程源（通过Ajax获得）
• 本地源（网页脚本中的字符串数组）。

根据您打算使用的源，将分别实例化Ajax.Autocompleter或Autocompleter.Local 。尽管配备了特定的选项，但这两个对象共享一个大型功能集并提供统一的用户体验。

在构建它们时，您将始终将其传递给以下四个方面：

• 您要使其自动补全的文本字段。与往常一样，您可以传递字段本身或其id =属性的值。

• 自动补全选项的容器，最终将包含一个

  可供选择的选项列表。同样，直接传递元素或其id = 。该元素通常是一个简单的
  。

  数据源将根据源类型表示为JavaScript字符串数组或远程源的URL。

  最后是选项。与往常一样，它们以各种哈希的形式提供，并且两个自动补全对象都可以在没有自定义选项的情况下运行；有适合所有情况的默认设置。

  要使用script.aculo.us的自动补全功能，您需要将controls.js和effects.js模块以及prototype.js模块一起加载。因此，您对script.aculo.us的最低加载应如下所示：

  创建一个Ajax自动完成器

  构造语法如下-

  new Ajax.Autocompleter(element, container, url [ , options ] )
  

  Ajax.Autocompleter的构造函数接受四个参数-

  • 元素名称或对要使用数据选择填充的文本字段的引用。

  • 元素名称或对

    元素的引用，用作控件的选择菜单。

  • 提供选择的服务器端资源的URL。

  • 通常的选项哈希。

  选件

  创建Ajax.Autocompleter对象时，可以使用以下一个或多个选项。

  Sr.No	Option & Description
  1	paramName The name of the query parameter containing the content of the text field that is posted to the server-side resource. Defaults to the name of the text field.
  2	minChars Number of characters that must be entered before a server-side request for choices can be fired off. Defaults to 1.
  3	Frequency The interval, in seconds, between internal checks to see if a request to the server-side resource should be posted. Defaults to 0.4.
  4	Indicator The id or reference to an element to be displayed while a server-side request for choices is underway. If omitted, no element is revealed.
  5	Parameters A text string containing extra query parameters to be passed to the server-side resource.
  6	updateElement A callback function to be triggered when the user selects one of the choices returned from the server that replaces the internal function that updates the text field with the chosen value.
  7	afterUpdateElement A callback function to be triggered after the updateElement function has been executed.
  8	Tokens A single text string, or array of text strings that indicate tokens to be used as delimiters to allow multiple elements to be entered into the text field, each of which can be auto-completed individually.

  例

  现场演示

  
          
        
        
        
        
     
     
     
        
  Type something in this box and then select suggested option from the list 
  
        
  
           Text field:
           
           
  
        
     
  
  

  现在，我们需要服务器端访问此页面并提供数据源URL（serverSideScript.php）。您将保持完整的逻辑以在此脚本中显示建议。

  仅举例来说，我们在serverSideScript.php中保留了一个简单的HTML文本。您可以使用CGI，PHP，Ruby或任何其他服务器端脚本编写脚本，以选择适当的建议并以

  • … 的形式对其进行格式化，然后将其传递回去。调用程序。

    
       
    One
       
    Two
       
    Three
       
    Four
       
    Five
       
    Six
    
    

    这将产生以下结果-

    并在上表中讨论了不同的选项。

    创建本地自动完成器

    如上一节所述，创建本地自动完成器与创建Ajax自动完成器几乎相同。

    主要区别在于如何为控件识别用于自动完成的支持数据集。

    使用Ajax自动完成器，我们提供了服务器端资源的URL，该URL将在给定用户输入的情况下执行必要的过滤，并且仅返回匹配的数据元素。使用Local Autocompleter，我们以JavaScript String数组的形式提供数据元素的完整列表，并且控件本身在其自己的客户端代码中执行过滤操作。

    整个构造语法实际上如下-

    new Autocompleter.Local(field, container, dataSource [ , options ] );
    

    Autocompleter.Local的构造函数接受四个参数-

    • 元素名称或对要使用数据选择填充的文本字段的引用。

    • 元素名称或对

      元素的引用，以用作控件的选择菜单

    • 对于第三个参数，我们提供了一个小的String数组，其中包含所有可能的值，而不是服务器辅助自动完成程序中的URL。

    • 通常的选项哈希。

    选件

    创建Autocompleter.Local对象时，可以使用以下一个或多个选项。

    Sr.No	Option & Description
    1	Choices The number of choices to display. Defaults to 10.
    2	partialSearch Enables matching at the beginning of words embedded within the completion strings. Defaults to true.
    3	fullSearch Enables matching anywhere within the completion strings. Defaults to false.
    4	partialChars Defines the number of characters that must be typed before any partial matching is attempted. Defaults to 2.
    5	ignoreCase Ignores case when matching. Defaults to true.

    例

    现场演示

    
            
          
          
          
          
       
    
       
          
    Type something in this box and then select suggested option from the list 
            
          
    
             Text field:
             
             
    
          
            
       
    
    

    显示时，在文本框中键入字符“ a”后，它将显示所有匹配的选项。

    使用我们的在线编译器通过上表中讨论的不同选项更好地理解代码。

    这将产生以下结果-