Mithrilで自動補完付きのテキスト入力を作る #JavaScript

HTML5以降で追加された<datalist>タグを使うと、テキスト入力で自動補完ができます。

サンプル

最終的にできあがる仮想DOMは次のような感じです

m('input', {
    list: 'datalist',
    oninput:  m.withAttr('value', ctrl.data),
    value: ctrl.data()
}),
m('datalist', {id:'datalist'}, [
    m('option', {value: 'data1'}),
    m('option', {value: 'data2'}),
    m('option', {value: 'data3'}),
])

たとえば、プログラミング言語名を補完するデータリストは次のように定義できます。id名のlanguagesを<input>タグのlist属性に指定すると言語の補完ができます。

要注意なポイントとしては、マウスで選択した瞬間はまだ確定しておらず、onchangeイベントは発行されません。選択された瞬間だと確定しません。oninputイベントを使います。リスト以外の項目を拒否するのであれば、イベントハンドラ内で候補のものがきたらプロパティに格納するようにすればOKです。

const languages = [
  'HTML',
  'CSS',
  'C Language',
  'C++',
  'Common Lisp',
  'Erlang',
  'Elixir',
  'Fortran',
  'Go Language',
  'Haskell',
  'Java',
  'JavaScript',
  'OCaml',
  'TypeScript'
];

m('datalist', {
    id: 'languages'
}, languages.map(language => {
    return m('option', {value: language});
}))