skillup

技術ブログ

JavaScript UI

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

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

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

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

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

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

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

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

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

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

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

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

-JavaScript, UI
-,

執筆者:


comment

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

関連記事

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

requirejsでのモジュール読み込み

JavaScriptのモジュール化では2019年5月現在ではwebpackなどを使うことが一般的かと思いますが、以前はrequire.jsなどというライブラリがあったようです。 例えば下記のようなファ …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

アーカイブ