jQuery UIを使って、オートコンプリート(入力補完、予測変換)を実装します。実装後のイメージはこんな感じです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="テストサイト">
<title>Topページ</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<div class="input_area">
<form action="search.php" method="GET">
<input type="text" name="gengo" id="gengo_list" placeholder="元号を入力 例:平成、めいじ">
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function() {
// 入力補完候補の単語リスト
var wordlist = [
"明治(めいじ)",
"大正(たいしょう)",
"昭和(しょうわ)",
"平成(へいせい)",
"令和(れいわ)",
];
// 入力補完を実施する要素に単語リストを設定
$("#gengo_list").autocomplete({
source: wordlist
});
});
</script>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
の部分でjQuery UIを読み込んでいます。
$("#gengo_list").autocomplete({
source: wordlist
});
の部分で入力補完候補の単語リストと入力フォームを紐づけています。
CSS
オートコンプリートの見た目のカスタマイズは、公式のCSSを見ながら変更したいclassなどを特定するとやりやすいです。jQuery UIのCSSは公式サイトのview sourceで確認できます。
/* オートコンプリートの装飾 */
ul.ui-autocomplete {
position: absolute;
list-style: none;
margin: 0;
padding: 0em 0.5em 0em 0.5em;
border: none;
border-radius: 8px;
cursor: default;
background-color: #ffffff;
}
.ui-autocomplete {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
参考
【jQuery UI】autocompleteを使って入力フォームをクリックした瞬間に入力候補を出す|Never catch a cold.
jQuery UI で Autocomplete (入力補完) を実装する方法
動きを簡単に実装する!jQuery UIを使う方法 | TechAcademyマガジン
javascript – Styling JQuery UI Autocomplete – Stack Overflow
コメント