オートコンプリート UI 用ライブラリ ac-box 作った - ﾘｱﾙｲﾝﾀｰﾈｯﾂｴﾝｼﾞﾆｬ-ｳｪｯﾌﾞﾛｸﾞ

シンプルなオートコンプリートコンボボックス UI ライブラリ ac-box を作った。

デモはこちら。

特徴

他の大きなライブラリに依存しない。スタンドアロン版ミニファイ済み 9KB。
UI の位置は自動で fix される。ボーダや背景などの装飾部分は独自に定義する。

使い方

README を参照してください。

Typeahead とか jQuery UI とかあるけど？

jQuery に依存したくない。

〜する機能はないの？

issue にもらえれば対応できるかもしれないです。

実装の話

オートコンプリートは、シンプルな機能ながらも微妙に細かなインタラクションがあるため、UI 実装の練習になる。

Flux

Flux アーキテクチャを実装している。

Flux は、MVC アーキテクチャを Observer Pattern + Command Pattern + データフローの一方向性という制約のもと実現しようというアーキテクチャ。「Flux」という、あえて「MVC」を連想させない名前を付けることで、最近の MVC 戦争に巻き込まれるのを微妙に回避した感があり、初学者にとっても分かりやすいのではないか。

View ステートとレンダラーによる描画

大体次のような感じ。

イベントハンドラ内で、次のような View ステートのプロパティを更新する

this.state = {
  // オートコンプリートメニュー開閉状態。
  // input にフォーカスあたったら true にしたりする
  isOpen: null,
  // input に設定する値。ESC でメニュー選択を中断したいので、
  // DOM 要素のプロパティ外にステートとして保持する
  value: null,
  // オートコンプリートメニュー内でフォーカスがあたっている
  // インデックスを表す数字。UP とか DOWN でインクリ / デクリメントする
  focusedIndex: null
}

その後レンダリング関数をコール。レンダリング関数は View ステートを参照して DOM 要素を更新する

このライブラリでは使ってないけど、React を使えばここらへんの仕組みをパフォーマンスを失うことなく自動的にやってくれる。