Zenn
🐥

autoComplete.js活用術：クエリサジェストの簡単導入！

2023/04/16に公開
#
検索
#
サジェスト
tech

TL;DR:


この記事では、autoComplete.jsを活用して日本語サイト向けにクエリサジェスト導入する方法を説明します

イントロダクション

クエリオートコンプリート（クエリサジェスト）は、ユーザの検索体験を改善するために広く導入されています。

この記事では、ウェブアプリケーションにおけるユーザーエクスペリエンスを向上させる方法の1つであるオートコンプリート機能をJavaScriptで実装するためのライブラリ、autoComplete.jsを紹介します。

autoComplete.jsを使用することで、簡単にオートコンプリート機能を追加し、ユーザビリティを向上させることができます。

autoComplete.jsとは？

JavaScriptオートコンプリートライブラリとの比較

JavaScriptのオートコンプリート（自動補完）機能を提供するライブラリはいくつかあります。以下は、よく使われるオートコンプリートライブラリを表でまとめました。

ライブラリ名 依存関係 サイズ カスタマイズ性 リモートデータ対応 ライセンス
jQuery UI Autocomplete jQuery, jQuery UI ~32KB 高 あり MIT
Awesomplete なし ~6KB 中 なし MIT
autoComplete.js なし ~8KB 高 あり MIT

autoComplete.jsはシンプルで軽量、そして依存関係がないオートコンプリートライブラリです。APIやデータベースからの候補データ取得やカスタマイズも容易です。

autoComplete.jsの基本的な実装

まずは最初にautoComplete.jsの基本的な実装を説明します。

HTML

HTML部分では、まずautoComplete.jsのCSSファイルをCDN（Content Delivery Network）を使って読み込んでいます。

そして、inputタグを用いて検索ボックスを作成し、そのIDをautoCompleteとしています。最後に、autoComplete.jsのライブラリをCDNを使って読み込んでいます。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>autoComplete.js Autocomplete Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.3/dist/css/autoComplete.min.css">
    <style>
      input {
        width: 100%;
      }

    </style>
  </head>

  <body>
    <input type="text" id="autoComplete">
    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>

  </body>

</html>

javascript

JavaScript部分では、まずautoCompleteオブジェクトを生成し、設定を行っています。ここでは、検索ボックスのプレースホルダーにSearch for Food...を表示し、データソースとして日本のラーメンや麺類のリストを設定しています。

次に、検索結果のアイテムにハイライト機能(highlight: true)を適用しています。これにより、検索ワードに一致する部分が強調表示され

最後に、検索結果のアイテムが選択されたときのイベントを設定しています。選択されたアイテムの値をautoCompleteJS.input.valueに代入することで、選択された値が検索ボックスに反映されます。

const autoCompleteJS = new autoComplete({
  placeHolder: "Search for Food...",
  data: {
    src: [
      "豚骨ラーメン",
      "醤油ラーメン",
      "味噌ラーメン",
      "塩ラーメン",
      "つけ麺",
      "博多ラーメン",
      "札幌ラーメン",
      "東京ラーメン",
      "熊本ラーメン",
      "鹿児島ラーメン",
      "担々麺",
      "冷やし中華",
      "Tonkotsu Ramen",
      "Shoyu Ramen",
      "Miso Ramen",
      "Shio Ramen",
      "Tsukemen",
      "Hakata Ramen",
      "Sapporo Ramen",
      "Tokyo Ramen",
      "Kumamoto Ramen",
      "Kagoshima Ramen",
      "Tantanmen",
      "Hiyashi Chuka"
    ],
    cache: true,
  },
  resultItem: {
    highlight: true
  },
  events: {
    input: {
      selection: (event) => {
        const selection = event.detail.selection.value;
        autoCompleteJS.input.value = selection;
      }
    }
  }
});

設定可能な内容

autoComplete.jsでは、様々なオプションを設定して、自動補完機能をカスタマイズすることができます。

設定可能な値の一覧です

機能や見た目をカスタマイズした自動補完機能を実装することができます。
具体的な設定方法やパラメータについては、それぞれの項目の解説を参照してください。
以下に主な設定項目を示します。

項目名 説明 型 デフォルト値 サンプル値
name インスタンスに任意の名前をつけることができます。 String autoComplete
selector 入力要素を指定するセレクタを設定できます。 String or Function #autoComplete selector: () => {
return [Element]; // Any valid selector
},
wrapper Boolean true
data 自動補完のデータソースとキー検索方法を指定できます Object {src: [}},keys:null} {src: ['apple', 'banana'], key: ['value']}
trigger 自動補完が開始されるトリガーイベントを設定できます。 Function { event: ["input"], condition: (query) => query.length >= 1 } { event: ["input"], condition: (query) => query.length >= 3 }
query 入力フィールドのプレースホルダーテキストを設定できます。 Function null (input) => { return input}
placeHolder 入力フィールドのプレースホルダーテキスト String Blank/Empty "Type to search"
threshold 検索を開始する最小文字数を設定できます。 Integer 1 3
debounce 入力間隔を制御するデバウンス時間（ミリ秒）を設定できます。 Integer 0 300
searchEngine 検索エンジンのロジックを設定できます。 String or Function "strict" "loose" or (query, record) => { return record.value.includes(query)}
diacritics ダイアクリティカルマークを無視するかどうか設定できます。falseにすると「café（カフェ）」を検索する際に、éをeと同じように扱えるようにすることができます。 Boolean true false
resultsList 検索結果リストの設定 Object or Boolean {} {} or false
submit Enterボタンのデフォルト動作を設定できます。 Boolean false true
events 入力フィールドと結果リストのイベントの追加または上書き Object {} {}

設定例

この設定例では、日本のラーメンと一部英語表記のラーメンを検索する自動補完機能が実装されています。

const autoCompleteJS = new autoComplete({
  name: "autoComplete",
  selector: "#autoComplete",
  wrapper: true,
  data: {
    src: [
      "豚骨ラーメン",
      "醤油ラーメン",
      "味噌ラーメン",
      "塩ラーメン",
      "つけ麺",
      "博多ラーメン",
      "札幌ラーメン",
      "東京ラーメン",
      "熊本ラーメン",
      "鹿児島ラーメン",
      "担々麺",
      "冷やし中華",
      "Tonkotsu Ramen",
      "Shoyu Ramen",
      "Miso Ramen",
      "Shio Ramen",
      "Tsukemen",
      "Hakata Ramen",
      "Sapporo Ramen",
      "Tokyo Ramen",
      "Kumamoto Ramen",
      "Kagoshima Ramen",
      "Tantanmen",
      "Hiyashi Chuka"
    ],
    cache: true,
  },
  trigger: (query) => {
    return query.replace(/ /g, "").length > 0; // スペースを無視する
  },
  query: (input) => {
    return input.replace("lamen", "ラーメン");
  },
  placeHolder: "検索クエリを入力してください...",
  threshold: 2,
  debounce: 300, // Milliseconds value
  searchEngine: "loose",
  diacritics: true,
  resultItem: {
    highlight: true
  },
  submit: true,
  events: {
    input: {
      selection: (event) => {
        const selection = event.detail.selection.value;
        autoCompleteJS.input.value = selection;
      }
    }
  }
});

この設定により、ラーメンの種類を検索しやすくする自動補完機能が実現されています。例えば、"lamen"と入力された場合でも"ラーメン"として検索結果が表示されるようになっています。また、検索結果の一致部分がハイライトされているため、ユーザーが求めている情報をすぐに見つけられるようになっています。

まとめ

この記事では、autoComplete.jsを用いたクエリサジェスト機能の実装方法について解説しました。autoComplete.jsはシンプルで軽量なJavaScriptライブラリであり、依存関係がなく、APIやデータベースからの候補データ取得やカスタマイズが容易です。

autoComplete.jsを活用することで、様々なウェブアプリケーションにおいて、効率的で使いやすいクエリサジェスト機能を提供することができます。

参考リンク

Discussion