jQuery

【jQuery UI】簡単!AutoCompleteの使い方

 
今回は jQueryUI に用意されている「AutoComplete(オートコンプリート)=自動補完」の使い方を紹介します。

デモ動画

 
 

オートコンプリートとは、インプットフォームなどに文字を入力すると予測変換のように候補を表示してくれる機能です。

検索フォームや都道府県の選択などに実装すると便利な機能です。

このサンプルでも都道府県のオートコンプリートを紹介しています。とても簡単に実装できるので、ぜひお試しください🙂

 


 

動画

準備中

 

 
 

解説

HTML の用意

まずは以下のように HTML を書いてください。

 
 

CSS を書く

インプットフォームが画面左上にあって使いにくいので、CSS で少しだけ調整します。(この手順は省略しても構いません。)

6~16行目を追加します。

 

このようになっていれば準備完了です。

 
 

jQuery と jQueryUI を読み込む

オートコンプリートを使うには、以下の3つのファイルが必要になります。

  • jquery.min.js
  • jquery-ui.css
  • jquery-ui.min.js

 

これらのファイル用意する方法は「ファイルをダウンロードする方法」「CDN を利用する方法」の2種類があります。

今回はダウンロードではなく、CDN(コンテンツデリバリネットワーク)の使い方を紹介します。

CDN を使うとインターネット経由でファイルを読み込むことができるので、簡単に jQuery や jQuery UI を使うことができます。

CDN を提供しているサイトはいくつかありますが、今回は私がいつも使っている「Google Hosted Libraries」を紹介します。
 

「Google Hosted Libraries」で検索、または、以下のリンクにアクセスしてください。
リンク:Google Hosted Libraries
 

「jQuery」と「jQuery UI」のコードを使います。

jQuery
jQuery UI

jQuery と jQuery UI のコードを 13, 14, 15行目に追加します。

 

以上で必要なファイルを読み込むことができました。

CDN はインターネット経由でファイルを読み込むため、オフラインだと使えないことに注意してください。

 
 

AutoComplete(オートコンプリート)の実装

9~64行目を追加します。

 
 

都道府県のデータがあるので少しコードが長く感じますが、オートコンプリートの実装は60~62行目だけです。

input タグの id="inputField" にオートコンプリートをセットしています。

$("#inputField").autocomplete({
    source: data
});

 
 

複数の input タグがある場合などは class 名でセットすることもできます。

$(".myinput").autocomplete({
    source: data
});

 

他にもカテゴリ分けや複数選択を設定することができるので、興味のある方は以下のリンクを参考にしてみてください。「view source」という箇所をクリックすると、サンプルコードを見ることができます。
参考:https://jqueryui.com/autocomplete/#default
 
 

完成

 
 

上手く動かない場合は、ウェブブラウザの開発者ツールを開いてコンソールから確認してみてください。

【プログラミング初心者の方向け】ウェブブラウザでエラーを確認する方法 今回は JavaScript や jQuery を始めたばかりという方に「ウェブブラウザでエラーを確認する方法」を紹介します。 ...

 

それでも解決しない場合は、下にサンプルコードを貼っているので見比べてみてください🙂
 

サンプルコード

 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

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