skillup

技術ブログ

JavaScript UI

オートコンプリートのプラグイン

投稿日:2016年1月4日 更新日:

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。

いろいろなプラグインがありますが、今回お勧めしたいのはBootstrapでも使えるtypeaheadというプラグインです。

こういったプラグインを使う場合

  • 候補自体はデータベースからとってきたい
  • 1変数だけでなくidなどその他の情報も取得したい

というケースが多いでしょう。

そういったケースにも対応できます。

自分で例を書こうかと思いましたが、下記リンクがわかりやすくまとまっているのでリンクを貼ります。

twitter typeaheadはいろいろ改良されていた

注意点としては入力の時のイベントの記述を書く必要がなく、ページを読み込んだ瞬間にinputがtypeaheadを実装します。

これがちょっとわかりにくいので注意しましょう。

-JavaScript, UI
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …