skillup

技術ブログ

JavaScript UI

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

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

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

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

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

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

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

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

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

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

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

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

-JavaScript, UI
-,

執筆者:


comment

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

関連記事

no image

JavaScriptのcall,bind+npmからのライブラリ読み込みで

npmを使ってライブラリ管理をする場合、個別にライブラリを読み込まず、package.jsonで読み込んだあと、一括してライブラリを読みこむことが一般的です。 で、その時の処理に関して。 例えばlea …

no image

vueについてのポイント

vueについて学習した時のポイントなどを。 Contents1 機能として確認したこと2 component3 vue-route4 vuex5 computed6 created,mounted7 …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

CSSで背景画像の出力 ~透過編~

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。 一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単な …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …