15_01.jpg


RSSフィードを読み込み、ワンクリックでTumblrへpost/reblogすることが出来るツール「feedpost」に、
タグ入力の補完機能を追加しました。

feedpost - post/reblog to Tumblr with RSS Feed.


これまでにfeedpostを使ってpostまたはreblogした時に使用したタグ入力履歴から、タグ入力欄に入力した文字に従って入力補完を行います。


27_02.jpg


上のサンプル画像では「d」を入力した際に、部分一致でヒットするタグ一覧がリスト表示されています。一覧に表示されたタグは、マウスまたはキーボードの上下とEnterキーで選択・入力することが出来ます。

また、複数タグの入力も可能です。


27_02_01.jpg




reference

この機能を実装するにあたり次のライブラリを使用しました。

suggest.js - 入力補完ライブラリ

またいずれ別記事で取り上げる予定ですが、このライブラリを選択した理由を簡単に言うと、

  • サーバからリアルタイムで取得する必要性があまりない
  • このためだけにjQuery UIを入れたくない

という感じです。他のUIも凝ったものにするのであれば、「jQuery UI」を入れて「Autocomplete」プラグインという選択肢もあったのですが、それはまたそういうときに検討したいと思います。