google closure 笔记-AutoComplete

四个组件

AutoComplete 主要有四部分组成：

AutoComplete: 核心部分，负责存储数据（所有的数据/状态都是在这里保存的），调用其他四个组件。

macher：负责匹配用户的输入和所有的提示数据，返回匹配后的提示数据。

InputHandler：负责操作输入框：获取用户的输入，对特定的key调用ac的相应事件（如方向键移动），将自动补全的数据填入输入框。inputhandler中有autocomplete的引用。

Renderer:负责操作下拉提示框，显示隐藏，高亮某一项等

具体的过程：

用户在input框中输入时，inputhandler监听输入，如果是特定的控制键就调用ac的对应函数（因为inputhandler中有autocomplete的引用，所以不是通过触发事件而是直接调用ac的对应函数）。比如用户按方向键下，调用ac的hiliteNext。

ac又会调用renderer对应的方法来高亮选中项。如果用户输入内容改变，会调用自己的update函数，update函数中调用ac相应函数并将用户输入的内容传过去，ac中会调用matcher匹配到新的提示数据并调用renderer来显示这些数据，最后看情况调用renderer高亮某一项。

事件处理的过程是：用户在输入框中输入 -> inputHandler -> autocomplete -> renderer

goog.ui.AutoComplete

AutoComplete(matcher, renderer, selectionHandler)：构造函数，三个参数分别是三个子组件，matcher负责匹配用户的输入和提示数据，render负责操作下拉提示框，inputhandler负责操作输入框

this.token_:用户输入的字符串

this.rows[]_: 自动补全的返回结果。

this.target_:

this.maxMatchs_:最多匹配数量

EventType:定义事件类型

handleEvent:所有的事件类型都会触发此函数，此函数根据事件类型的不同调用相应的函数处理，有四种事件：高亮某一项，选中高亮项，取消延时dismiss，设置延时dismiss

setToken:设置this.token_, 然后调用matcher从提示数据中匹配token，返回匹配数据，然后调用this.renderRows将匹配的数据写到dom中。

hiliteNext/hilitePrev/hiliteId/hiliteIndex : 高亮某一项，都是调用render.hiliteId 来实现的。

selectHilited: 选中高亮项，调用inputhandler.selectRow()方法把选中的数据写到输入框中，触发update事件

dismiss：销毁所有数据:token,rows等，触发update事件

renderRows:将匹配的提示数据保存this.rows,调用renderer.renderRows 来创建下拉提示框，更新一些数据如hilitedid，高亮其中一项，触发update事件

getIdOfIndex_ / getIndexOfId: id 和 index互相转换，index就是匹配数组的index，而id = index + firstId, 每一次更新数据的时候，firstid += 新数据数组的长度

attachInput / detachInput:将inputhandler和输入框绑定，绑定之后就可以显示提示了。

update: 调用inputHandler.update;

goog.ui.InputHandler

主要做如下两件事：

1，监听用户的输入，格式化用户的输入数据，将选中的提示数据写入到输入框

2，对特定的按键，调用ac的方法来处理，如方向键enter键esc等，ac可能会再调用renderer。

attachInput :设置输入框，绑定事件监听。主要监听焦点事件和键盘事件

attachAutoComplete:设置this.ac_;

setTokenText:设置输入框中的文字，不会触发update，会对文字做格式化操作

setSeparators: 设置分隔符this.separators_, 分隔符用来将用户的输入划分成多个token

setThrottleTime:设置最小刷新的间隔时间。

handleKeyEvent: 处理keyevent，调用对应的方法。

moveUp / moveDown:调用ac的对应方法来移动提示框中的高亮项。

splitInput: this.separators来分割用户的输入

goog.ui.AutoComplete.Renderer

renderRows(rows, token): 这个rows中是纯文本，用纯文本数据创建一个下拉列表，token是要高亮显示的文字

renderRowHtml(row, token)：区别是每一项都是html而不是纯文本

dismiss：隐藏提示

show：显示提示

hiliteRow：高亮显示某一项

hiliteId：根据id高亮显示一项

redraw / reposition:

hiliteMatchingText: 私有方法，高亮显示token

handleMouseOver_:触发hilite事件

goog.ui.AutoComplete.ArrayMatcher

最简单的实现，从一个预设的数组中找出和token匹配的数据。通过设置rowfilter可以过滤掉不需要显示的数据

他有两个子类：remotearraymatcher和richremotearraymatcher，可以从指定的url加载数据

拓展类

上面是三个基类，基类中的提示数据是预设在数组中的，下面是一些拓展类，主要是拓展了用ajax接口来取数据和处理富文本：

goog.ui.AutoComplete.Remote

简单的拓展，和AutoComplete的区别就是它的ArrayMatcher是使用的goog.ui.AutoComplete.RemoteArrayMatcher。

goog.ui.AutoComplete.RemoteArrayMatcher：

从远程的url取数据，核心方法：

requestMatchingRows，使用ajax从指定的url获取数据。

而这个方法是在autocomlete中的setToken方法中调用的，当输入框内内容改变时，setToken方法会调用matcher.requestMatchingRows来去数据，当然不是立刻取到数据，而是把自己matchListener传给matcher。matcher收到返回数据时，会调用matchListener。