今回と次回は,
入力補完機能を加えるAutocompleter
今回は,
Autocompleterを使うと,
Autocompleter を利用したテストページを作成してみましたので,
いったいどんな仕組みで,
Ajax.Autocompleterの方法
fooと打つと,
<ul>
<li>foobar</li>
<li>foofoo</li>
</ul>
入力エリアの下にこのHTMLを挿入して,
Autocompleter.Localの方法
Autocompleter.
そのためにまずは,
まずは,
foo|
----
foo
foobar
----
デフォルトではさらに,
foo|
----
foo
foobar
bar foobar
----
日本語の入力を常とする私たちには,
bar-foobar
bar,foobar
barfoobar (語がfooを含んでいるだけ)
デフォルトの前方検索と単語別前方検索の他に,
これらの検索アルゴリズムのコードについての説明は後述します。
キャレット位置からトークンを取り出す仕組み
ここからは,
Autocompleterの心臓部は,
- キャレットの位置を大雑把に求める
- キャレットの位置の付近にある文字列の切りだし
(この文字列をトークンといいます) - トークンから候補を導く
キャレットとは,
キャレットの位置を大雑把に求めるのには,
この方法では,
次に,
以前の内容 hoge,,hoge
現在の内容 hoge,foo,hoge
で,
キーレスポンスを犠牲にしないための工夫
ここで,
ここで,
小休止を検知するために,
0129: onKeyPress: function(event) {
...
0162: if(this.observer) clearTimeout(this.observer);
0163: this.observer =
0164: setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
this.
つまり,
このように,