#2 ポケモンタイプ別検索アプリを作る-サジェスト機能編【ぴよぴよコーダーの開発日記】

さて、ポケモンのタイプ別検索アプリの作成　続きです。のんびり行きます。今回はサジェスト機能の実装です。ほぼコピペです。

とりあえず、index.htmlを作って、

emmetでhtml:5エンターキーした後、こんなコード書く

<input type="text" id=""><button>しらべる</button>

★工夫ポイント：子供でも読めるように、調べるを「しらべる」にした

さて、次はサジェスト機能の実装！。jQueryしか書けないので、「サジェスト　jQuery」でぐぐる。

jQueryのAutoCompleteを使って自動補完される検索ボックスを作る方法

素敵なページが見つかったので、ソースをコピる。jQueryUIを利用しているけど、ちゃんと日本語入力にも対応したコードもとても参考になる。

★学んだこと：input type="text"じゃないぢゃん。検索ボックスはinput type="search"らしい。HTML5の新しいタグらしい。

<input type="search"> :検索テキストの入力欄を作成する

<input type="search" id="autocomplete_search"><button>しらべる</button>

あれ？動かないぞ？コンソール見てたら、

あ、jQuery本体入れるの忘れてた。。↓の2行目のところで入れた。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>    

jQuery入れたら動いた！そりゃそうだ。でもまだエラーメッセージある。

うん。意味がわからん。でも、これってjQueryUI全部入りで呼んでるから、無関係なところ呼んでいるのでは？？と推測

jQueryUI、必要なところだけダウンロードできたはず。と、auto-completeだけダウンロード。

①jQueryUIのページへ行く

②下のようにボタンを押していく

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> -->
<script src="./lib/jquery-ui.min.js"></script>

ダウンロードして、libといったディレクトリ切って中に入れた。コンソールエラーもでなくなった！

それにしてもjQueryUIのサジェストのCSSが派手な気がする。CSSを灰色っぽく修正することにした。

/* 位置調整 */
.ui-autocomplete {
 top: 3.5em;
 left: 0.5em;
}

/* 色調整 */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
　border: 1px solid #ddd;
　background: #ffffff;
　color: #666;
　font-weight: normal;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
　color: #666;
　text-decoration: none;
}

灰色っぽくなった！

サジェスト機能が無事にできたので、次は検索キーワードに応じた情報を表示する機能を作ります。