オートコンプリート UI 用ライブラリ ac-box 作った
シンプルなオートコンプリートコンボボックス UI ライブラリ ac-box を作った。
特徴
- 他の大きなライブラリに依存しない。スタンドアロン版ミニファイ済み 9KB。
- UI の位置は自動で fix される。ボーダや背景などの装飾部分は独自に定義する。
使い方
README を参照してください。
Typeahead とか jQuery UI とかあるけど?
jQuery に依存したくない。
〜する機能はないの?
issue にもらえれば対応できるかもしれないです。
実装の話
オートコンプリートは、シンプルな機能ながらも微妙に細かなインタラクションがあるため、UI 実装の練習になる。
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 }
このライブラリでは使ってないけど、React を使えばここらへんの仕組みをパフォーマンスを失うことなく自動的にやってくれる。