05-autocomplete (options)方法

9.3.1　 autocomplete (options) 方法

autocomplete (options) 方法要求 <input> 元素必须作为一个显示在建议列表上方的输入框类型来被管理。 options 参数则指定了建议列表在用户在输入框中输入时的相关 行为。

自动补全的运作流程是这样的：用输入框中的字符和指定的数据源（即 options. source ）进行匹配。只要和数据源中的任意字符匹配，就算匹配成功，而不仅仅是从开头开始匹配。因此，如果用户要查找匹配字母“a”，则其补全结果并不需要以a开头，也可以是中间含有a。

1．自动补全的管理

表9-1详细列出了可用于管理自动补全的选项。

| 选项 | 功能 | | :----- | :----- | :----- | :----- | | options.disabled | 当设置为 true 时，禁用自动补全机制。用户仍然可以在输入框中输入，但不会再有列表显示。可以使用 autocomplete ("enable") 开启自动补全机制 | | options.source | 指定用于建议列表的数据源。数据可以是本地的（程序已知的），也可以是远程的（从服务器端获取的） | | options.minLength | 触发建议列表显示所需的最少输入字符数。默认值为1 | | options.delay | 对已输入的字符进行匹配前的延时设置（毫秒）。默认延时为300 ms |

2．管理建议列表的事件

表9-2中描述的事件要么是在输入框中输入时触发，要么是在列表中选择项目时，或是调用了任意一个管理自动补全的方法时触发。在这些方法中，可以使用 autocomplete ("widget") 来访问包含列表的 <ul> 元素。当你需要从整体上操作列表，进而访问每一个 <li> 列表项时，此方法尤其有用。

| 选项 | 功能 | | :----- | :----- | :----- | :----- | | options.open | open (event) 方法会在建议列表显示时调用 | | options.close | close (event) 方法会在建议列表被关闭时调用 | | options.search | search (event) 方法会在显示建议列表前的搜索匹配工作完成后调用。如果此方法返回 false ，则列表不会显示 | | options.focus | focus (event, ui) 方法在列表项获得焦点时，或者是鼠标移至列表项或者用方向键选择列表项时调用。 ui.item 是一个 {label, value} 对象，其中 label 对应着建议列表中显示的文本，而 value 则是所选项对应的将要插入输入框中的值。（ label 和 value 常常有着相同的值，但分离这两个变量可以提供更多的灵活性。）如果该方法返回 false ，输入框中的内容不变 | | options.select | select (event, ui) 方法会在某个列表项被选择时调用。如果该方法返回 false ，输入框中的内容不变。 ui.item 是一个 {label, value} 对象，其中 label 对应着建议列表中显示的文本，而 value 则是所选项对应的将要插入输入框中的值。（ label 和 value 常常有着相同的值，但分离这两个变量可以提供更多的灵活性。）如果该方法返回 false ，输入框中的内容不变 | | options.change | change (event) 会在输入框失去焦点（当用户单击了输入框外的任意地方）且内容发生变化时调用。此事件常于用户在列表中选择了一个新的项目、将新的文本插入输入框并关闭列表后发生 |