skillup

技術ブログ

JavaScript UI

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

投稿日:

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

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

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

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

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

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

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

http://qiita.com/insight3110/items/4bdab5f5d46c3660f320

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

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

-JavaScript, UI
-,

執筆者:


comment

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

関連記事

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

JavaScriptでの時計作成

今回はWebアプリで1秒ごとに更新されるデジタル時計の作成方法について。 基本的には 現在時刻を秒まで含めて表示 その関数を一秒ごとに更新 でOKです。 ネットにどんぴしゃりのサンプルが落ちていたので …

no image

bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。 入力欄にフォーカスして、遷移したときに …

no image

npmでのJSライブラリインストール&ビルド(※gulp使用時)

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 前提条件としては nodeのインストール npmのインストール がされていればOKです。 最小構成でい …