本日は入力候補を自動補完させる検索バーの作り方を解説していきます。
ライブラリやバックエンド言語が必要だと思われているかもしれませんが、基本的にはHTMLのみで実装できるので初学者の方やデザイナーの方でも作れちゃいます。
こういう細かい実装ができるようになるとWordPressの管理画面のカスタマイズまで手を出せるようになるのでチャレンジしてみましょう。
また動画もあるので必要に応じて活用してください。
入力候補の自動補完ができる検索バーの作り方
入力候補の自動補完ができる検索バーは以下のようなHTMLで作ることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div>
<input list="list" type="text" id="input" />
<datalist id="list">
<option value="Java"></option>
<option value="JavaScript"></option>
<option value="Ruby"></option>
<option value="Python"></option>
<option value="PHP"></option>
<option value="TypeScript"></option>
<option value="HTML"></option>
<option value="CSS"></option>
</datalist>
</div>
</body>
</html>入力欄はInputで作っていて、こちらは特に困ることは無いと思います。
ポイントとしてはdatalistの部分になります。
datalistは画面に表示されない状態で、入力候補をHTMLで記載することができるタグです。
入力候補はoptionタグを使ってvalue属性に設定します、セレクトボックスの作り方に似ています。
これらにより画面上ではinputで作った入力欄のみが表示されていて、クリックするとdatalistで設定した入力候補が表示されます。
また途中まで入力した場合でも近しいキーワードがあれば入力候補を表示してくれます。
datalistで選択した内容をJavaScriptで取得する
それではJavaScriptを使ってdatalistを使って自動補完した内容を取得してみます。
取得した内容を画面上にも表示したいのでHTMLでpタグを用意しておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div>
<input list="list" type="text" id="input" />
<datalist id="list">
<option value="Java"></option>
<option value="JavaScript"></option>
<option value="Ruby"></option>
<option value="Python"></option>
<option value="PHP"></option>
<option value="TypeScript"></option>
<option value="HTML"></option>
<option value="CSS"></option>
</datalist>
</div>
// ここを追記
<p id="dataListResult"></p>
</body>
</html>続いてJavaScriptを書いていきます。
const input = document.querySelector("input");
const dataListResult = document.querySelector("#dataListResult");
input.addEventListener("change", (e) => {
const value = input.value;
dataListResult.innerHTML = value;
});一点注意としてはdatalistのoptionのvalue属性を取得するわけでは無いことです。
入力候補はdatalistのoptionで管理しているのものの、フォームとして表示するのは入力欄であるinputになるのでinputのvalue属性から値を取得します。
HTML側で事前に用意していたpタグを使って選択した内容を画面に表示できていますね。
要素の取得やフォームのコーディング自体については、別の記事で詳しく解説していますので初学者の方はぜひ目を通して見てください。