オートコンプリートについて

オートコンプリートの様々な領域を設定して、オートコンプリート対応検索フォームの生成を制御したり、オートコンプリート対応検索フォームの一部として含まれるautocomplete_data.jsファイルを制御したりできます。

オートコンプリートについて

autocomplete_data.jsファイルは、オートコンプリートセットアップページで保存された変更があるたびに、再生成され、検索コンテンツネットワークに公開されます。

オートコンプリートの設定

オートコンプリート対応の検索フォームおよびファイルの生成を制御するオプションを設定および設定できます。

オートコンプリートを設定したら、結果として生成されるHTMLソースを確認できます。 HTMLソースは、Webサイトのページにコピー&ペーストするものです。

検索フォームが表示される状態のプレビューを参照してください。.

オートコンプリートワードリストの設定を参照してください。

オートコンプリートCSSの設定を参照してください。

オートコンプリートを設定するには

  1. 製品メニューで、Design > Auto-Complete > Auto-Complete Setup​をクリックします。

  2. Auto-Complete Setupページで、必要なオプションを設定します。

    検索フォームが表示される状態のプレビューも参照してください。.

    オプション

    説明

    提案の最大数

    オートコンプリート候補リストに表示する項目の最大数を指定します。

    最小入力文字

    顧客がオートコンプリート検索フォームに入力してから候補を表示する文字数を指定します。

    最大キャッシュエントリ数

    顧客のブラウザーにキャッシュする、以前にリクエストされた自動完了候補の最大数を指定します。 一般に、この設定はデフォルトの1000のままにする必要があります。

    このオプションを0に設定すると、ブラウザーのキャッシュを完全に無効にできますが、お勧めしません。

    フォーム名

    オートコンプリート対応検索フォームの「form」タグの「name」属性を指定します。 例：

    <form name="SiteSearch" method="get" action="https://sp1004337c.guided.t1.atomz.com" target="_blank">

    ここで、 SiteSearch はフォームタグのname属性です。

    DivタグID

    オートコンプリート対応検索フォームの「div」タグのID属性を指定します。 例：

    <div id="autocomplete">

    autocomplete はdivタグの属性です。

    入力タグID

    オートコンプリート対応検索フォームの「input」タグのID属性を指定します。 例：

    <input type="text" id="q" name="q" />

    q は入力タグのid属性です。

    シャドウを表示

    オートコンプリート候補リストにコスメティックドロップシャドウを追加します。

    語句の先頭でのみ一致

    入力テキストの先頭に一致する結果のみを提案します。

    UTF-8文字セットをサポートします。

    用語の非ASCII文字を正しく処理する。

  3. クリック Save Changes.

  4. （オプション）次のいずれかの操作を行います。

オートコンプリートワードリストの設定

オートコンプリートで顧客に表示する単語やフレーズのリストを提案として設定します。

オートコンプリートの設定を参照してください。

オートコンプリートCSSの設定を参照してください。

オートコンプリートワードリストを設定するには

  1. 製品メニューで、Design > Auto-Complete > Auto-Complete Word List​をクリックします。

  2. Auto-Complete Word Listページで、必要なオプションを設定します。

    検索フォームが表示される状態のプレビューを参照してください。.

    オプション

    説明

    よく使用される検索期間

    顧客の最近の検索で使用した語句を含める期間を制御します。

    最大検索数

    オートコンプリートの単語リストに含める、検索する単語および語句の最大数を制御します。 最も人気の高いトップワードやフレーズが含まれます。

    フィールド名

    各フィールド名は、インデックス付きの値を含める1つのフィールドの名前を定義します。 +および — を使用して、フィールド名を追加または削除します。

    最大値数

    選択したフィールド名に許可するフィールド値の最大数を定義します。 最も多く参照される上位の値が含まれます。

    次の語句を追加する

    オートコンプリートの単語リストには、この領域にリストされている単語と語句が入力されます。

    「を編集」をクリックして、リストを表示するか、リストに単語や語句を追加します。 完了したら、「 変更を保存 」をクリックします。

    次の語句を削除する

    この領域のエントリは、オートコンプリートの単語リストには表示されません。

    「を編集」をクリックして、リストを表示するか、リストに単語や語句を追加します。 完了したら、「 変更を保存 」をクリックします。

    このリストでは正規表現を使用できます。 このリストで正規表現を指定するには、行の先頭にregexpを付け、その後に1つのスペースを付け、その後に正規表現を付けます。 正規表現に一致する単語リスト内の行はすべて削除されます。

    重要:正規表現は、以前に他のアプリケーションで使用したことがある場合にのみ使用してください。

    正規表現を参照してください。

    大文字と小文字を区別しない

    オートコンプリートの単語リストで、英大文字と小文字のみが異なる重複したエントリは削除されます。すべての単語リストのエントリは、強制的に小文字に変換されます。

    オートコンプリート候補を「最初の文字は大文字」または「すべて大文字」で表示する場合は、 text-transform : capitalize; または text-transform : uppercase; 結果項目の「/*スタイル」の下のCSSコンテンツのオートコンプリートに対するCSSテキストプロパティ。

    オートコンプリートCSSの設定を参照してください。

    再インデックス時の更新

    アカウントの再インデックスが成功するたびに、オートコンプリートワードリストが自動的に再生成されます。

  3. クリック Save Changes.

  4. （オプション）次のいずれかの操作を行います。

    • 加えた変更を元に戻す場合は、History​をクリックします。

    • Preview Word List​をクリックして変更内容を保存し、Auto-Complete Word List Previewページを開いてオートコンプリート候補リストを確認します。 ページ上部付近のナビゲーションオプションを使用して、表示されるリストを確認し、調整します。 完了したら、「Close」をクリックしてAuto-Complete Word Listページに戻ります。

      「履歴」オプションの使用を参照してください。

    • クリック Live.

      ライブ設定の表示を参照してください。

    • クリック Push Live.

      ライブのステージ設定をプッシュするを参照してください。

オートコンプリートCSSの設定

オートコンプリートCSSを使用して、使用するオートコンプリートカスケードスタイルシートを設定します。

オートコンプリートCSSは、autocomplete_styles.cssの内容を制御します。この内容は、オートコンプリート対応の検索フォームの一部として含まれます。 ここで指定するCSSによって、オートコンプリート提案リストの視覚的表示が制御されます。 可能な視覚的なプレゼンテーションのアイデアの例については、次を参照してください。

オートコンプリートワードリストの設定を参照してください。

オートコンプリートの設定を参照してください。

オートコンプリートCSSの設定が完了したら、検索フォームをプレビューして、指定したCSSが外観とレイアウトで許容可能かどうかを確認できます。

検索フォームが表示される状態のプレビューを参照してください。.

重要:カスタムオートコンプリートCSSを適用するには、HTMLコード内の2行目からコメントタグを削除する必要があります。次に、検索フォームを含むページのheadセクション内に同じ行を移動します。

検索フォームのHTMLコードをにコピーするを参照してください。.

オートコンプリートCSSを設定するには

  1. 製品メニューで、Design > Auto-Complete > Auto-Complete CSS​をクリックします。

  2. Auto-Complete CSSテキストフィールドに、オートコンプリート候補リストに関連付けるカスケード・スタイル・シートの情報を貼り付けるか、入力します。

  3. クリック Save Changes.

  4. （オプション）次のいずれかの操作を行います。

Webサイトに表示される検索フォームのプレビュー

オートコンプリートCSSとオートコンプリートCSSの設定に基づいて、HTMLコードをWebサイトに追加する場合の検索フォームの表示をプレビューできます。

オートコンプリートの設定を参照してください。

オートコンプリートCSSの設定を参照してください。

検索フォームのHTMLコードをにコピーするを参照してください。.

検索フォームでのコレクションの使用を参照してください。

フォームでのフレームの使用を参照してください。

詳細検索フォームの例を参照してください。

詳細検索フォームのHTMLコードを参照してください。

詳細検索フォームテンプレートコードを参照してください。

検索フォームがWebサイトに表示される状態をプレビューするには

  1. 製品メニューで、Design > Auto-Complete > Search Form​をクリックします。
  2. （オプション）HTML code​をクリックして、コピーしてWebサイトのページに貼り付けるHTMLを表示します。

検索フォームのHTMLコードをWebサイトのページにコピーする

オートコンプリートCSSとオートコンプリートCSSの設定に基づいて、HTMLコードをWebサイトに追加する場合の検索フォームの表示をプレビューできます。

オートコンプリートの設定を参照してください。

オートコンプリートCSSの設定を参照してください。

検索フォームのHTMLコードをにコピーするを参照してください。.

検索フォームでのコレクションの使用を参照してください。

フォームでのフレームの使用を参照してください。

詳細検索フォームの例を参照してください。

詳細検索フォームのHTMLコードを参照してください。

詳細検索フォームテンプレートコードを参照してください。

検索フォームのHTMLコードをWebサイトのページにコピーするには

  1. 製品メニューで、Design > Auto-Complete > Form Source​をクリックします。

    メモ

    フォームソースのform name=値は変更しないでください。

  2. （オプション）次のいずれかの操作を行います。

    • オートコンプリートCSSを設定し、スタイルを検索フォームに適用する場合は、HTMLコード内の2行目からコメントタグを削除します。 次に、検索フォームを含むページのheadセクション内に同じ行を移動します。
    • パフォーマンスを最大にするには、HTMLコードの下部に一覧表示されているタグを移動し、検索フォームを含む各ページのbodyセクションの下部に配置します。

  3. コードをコピーして、検索フォームを表示するWebサイトのWebページに貼り付けます。

このページ