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

オートコンプリートの様々な領域を設定して、オートコンプリートが有効な検索フォームの生成を制御したり、オートコンプリートが有効な検索フォームの一部として含まれる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タグの属性です。

    Input tag ID

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

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

    ここで q は、inputタグの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テキストプロパティ。「/* styles for result item */」の下。

    「オートコンプリート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によって、オートコンプリートの提案リストが視覚的に表示されます。 可能な視覚的なプレゼンテーションのアイデアの例については、次を参照してください。

https://developer.yahoo.com/yui/examples/autocomplete/ac_skinning.html.

オートコンプリートWordリストの設定。

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

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

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

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

検索フォームのHTMLコードを.

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

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

「アドバンス検索フォームの例」を参照してください。

「HTMLコードのアドバンス検索」を参照してください。

「アドバンス検索フォームテンプレートコード」を参照してください。

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

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

検索フォームのHTMLコードのWebサイトのページへのコピー

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

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

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

検索フォームのHTMLコードを.

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

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

「アドバンス検索フォームの例」を参照してください。

「HTMLコードのアドバンス検索」を参照してください。

「アドバンス検索フォームテンプレートコード」を参照してください。

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

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

    メモ

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

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

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

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

このページ