#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のテンプレートリテラルならラクに書けそう!参考にしたページ↓
$('.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版 (【使い方】炎とかフェアリーなどの文字列を入力ボックスに入れて「しらべる」をクリックすると結果が表示されます)
この記事が気に入ったらサポートをしてみませんか?