スペルチェックコンポーネント¶

機能説明¶

ユーザーが検索したキーワードのスペルミスをチェックし、修正候補を表示する機能です。

前提

スペルチェックオプション の契約が必要です。

識別子にグループ名が含まれます。
表示にはグループ名に対応したスペルチェックリソースファイルが必要です。
グループ名を指定しない場合、スペルチェックリソースファイルの先頭の定義が使用されます。
存在しないグループ名を指定した場合、警告が表示されます。

設定方法¶

必須設定¶

Htmlの修正

<div data-[モード]="spellcheck-group1"></div>

リソースファイルの作成

スペルチェックリソースファイル¶

スペルチェックリソースファイルは、スペルチェックコンポーネントを用いて、スペルチェックを行う際に、その振る舞いを変更する際に作成するファイルです。

前提

スペルチェックオプション の契約が必要です。

スペルチェック機能を使用しない場合、あるいは標準の振る舞いで使用する場合、このファイルを作成・読み込みする必要はありません。

sitesearchSpellcheck という変数に、各値がハッシュである配列を代入したファイルを作成します。

var sitesearchSpellcheck = [
  {
    group: {label: "もしかして：", name: "group1"},
    count: 5,
    maxedits: 2,
    includeExactMatch: false,
    separatorChar: "、",
    clickHook: () => {
      console.log("修正候補をクリックしました");
      return true;
    }
  }
];

各ハッシュは次のエントリを含みます。

親要素	子要素	型	デフォルト値	説明
group				スペルチェックコンポーネントを表示するグループの単位。以下のメンバーを持つ
	label	文字列	もしかして：	スペルチェックコンポーネントで表示される見出し
	name	文字列	group1	スペルチェックコンポーネントを呼び出す際のコンポーネント識別子の一部
count		数値	5	コンポーネントで表示される修正候補の件数。
maxedits		1 または 2	2	コンポーネントで表示される修正候補の編集回数。
includeExactMatch		真偽値	false	検索ワードと完全一致する修正候補を表示するかどうかの指定。true を指定した場合は表示する
separatorChar		文字列	、	修正候補の区切り文字
clickHook		関数	() => true,	修正候補をクリックした際に実行される関数を指定する。詳細は「clickHook」を参照してください

DOM 構造¶

Dom

スペルチェックコンポーネント¶

<div data-[モード]="spellcheck-[識別子]">
  <div class="gn_spellcheck">
    <span class="spell-check-label">もしかして：</span>
    <a
      href="?q=[修正候補1]&spellcheckgroup=[識別子]&beforekeyword=[元の検索ワード]"
      class="spell-check-link"
      >修正候補1</a
    >
    <span class="spell-check-separator">、</span>
    <a
      href="?q=[修正候補2]&spellcheckgroup=[識別子]&beforekeyword=[元の検索ワード]"
      class="spell-check-link"
      >修正候補2</a
    >
    <span class="spell-check-separator">、</span>
    <a
      href="?q=[修正候補3]&spellcheckgroup=[識別子]&beforekeyword=[元の検索ワード]"
      class="spell-check-link"
      >修正候補3</a
    >
  </div>
</div>