jQuery UI の autocomplete を使ってオートコンプリート機能を実装する

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

コメント

タイトルとURLをコピーしました