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

ポケモンのタイプ別検索アプリ　今回は、検索文字列に対応した情報を表示する機能を作ります。簡単です。

タイプ多すぎなので、if文じゃなくて、switch文だなと選択する。

HTMLは、こんな感じ。

<form>
 <fieldset>
   <legend>ポケモンのタイプをしらべる</legend>
   <label for="autocomplete_search">
     <input type="search" id="autocomplete_search">
   </label>
   <button>しらべる</button>
 </fieldset>
 <div class="result"></div>
</form>

★セマンティックなこだわり：legendでフォームの入力項目グループのタイトルをマークアップ。legendって、fieldsetと一緒に使うんだね。sectionとheadingの関係に似てるのかな。

jQueryは、こんな感じ。

$('.search_button').on('click', function(){
 const pokemonType = $('#autocomplete_search').val();
 switch (pokemonType){
   case 'フェアリー':
   $('.result').html('鋼と毒によわい');
   break;
   case '炎':
   $('.result').html('水と地面と岩によわい');
   break;
   case '水':
   $('.result').html('電気と草によわい');
   break;
 }
});

あれ？一瞬しか表示されないぞ

アニGIFつかったけど、うごかんね。。

★勉強になった　→buttonタグの初期値って、type="submit"だったのか。。なので、送信処理して一瞬で検索ボックスがクリアになっていたのか。下のように修正

<button type="button">しらべる</button>

buttonタグのtype属性には、submit、reset、button（汎用的に使える押しボタン）のいずれかを指定しましょう。

無事に表示されるようになったけど、炎タイプのポケモンにどんなのがいるかも表示したい。複数行をラクに書ける方法ないかな。。

ES6のテンプレートリテラルならラクに書けそう！参考にしたページ↓

JavaScriptで複数行文字列を代入する一番簡単な方法

$('.search_button').on('click', function(){
 const pokemonType = $('#autocomplete_search').val();
 switch (pokemonType){
   case 'フェアリー':
   const text1 = `<p class="result_head">鋼と毒によわい</p>
   <p>おもなポケモン：ピッピ、ピクシー、プリン、プクリン、ブル、グランブル、クチート</p>`;
   $('.result').html(text1);
   break;

   case '炎':
   const text2 = `<p class="result_head">水と地面と岩によわい</p>
   <p>おもなポケモン：ヒトカゲ、リザードン、ロコン、キュウコン、ウィンディ、ボニータ、ブーバー、ブースター、ホウオウ、ドンメル、バクーダ</p>`;
   $('.result').html(text2);
   break;

   case '水':
   const text3 = `<p class="result_head">電気と草によわい</p>
   <p>おもなポケモン：ゼニガメ、カメックス、コダック、ゴルダック、ニョロモ、メノクラゲ、ヤドン、
   クラブ、タッツー、ヒトデマン、スターミー、コイキング、ギャラドス、マリル、キャモメ</p>`;
   $('.result').html(text3);
   break;
 }
});

もりもり書いちゃったよ。ポイントはバックスラッシュで囲むんだね。

できた！＜完＞

一通り、機能作ったけど、次やるとしたら、スマホ対応とか、アクセシビリティ、高速化回りかな。

デモ：jQuery版　（【使い方】炎とかフェアリーなどの文字列を入力ボックスに入れて「しらべる」をクリックすると結果が表示されます）