SearchBox概要

カスタマイズなしの状態

カスタムエレメントmf-search-boxを利用する。

コード(html)

<mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"></mf-search-box>

レンダリング結果

ページ右上に設置する検索窓の典型例

コード(css追加)

    <style>
    .my-search-box {
      width: 300px;
    }
    .my-search-box .mf_finder_searchBox_submit {
      padding: 0;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    options-hidden
    doctype-hidden
    ignore-search-result
    placeholder="サイト内検索"
    submit-text=""
    ></mf-search-box>

レンダリング結果

検索結果受信時にデータをフォームへ反映させず無視する

属性 ignore-search-resultを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-ignore-search-result .mf_finder_searchBox_query_input {
      background-color: pink;
      color: black;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-ignore-search-result"
    ignore-search-result
    ></mf-search-box>

レンダリング結果

検索語入力エリアのプレースホルダをカスタマイズ

属性 placeholderを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-placeholder .mf_finder_searchBox_query_input {
      background-color: pink;
      color: black;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-placeholder"
    placeholder="サイト内検索はこちら"
    ></mf-search-box>

レンダリング結果

検索語入力エリアのtitle属性をカスタマイズ

属性 input-titleを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-input-title .mf_finder_searchBox_query_input {
      background-color: pink;
      color: black;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-input-title"
    placeholder="ここにマウスオーバーしてください"
    input-title="検索したいワードを入力するエリアです"
    ></mf-search-box>

レンダリング結果

カテゴリの選択用UIを非表示にする

属性 category-hiddenを利用する。

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    category-hidden
    ></mf-search-box>

レンダリング結果

検索結果並び順の選択用UIを非表示にする

属性 sort-hiddenを利用する。

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    sort-hidden
    ></mf-search-box>

レンダリング結果

ページ毎表示件数の選択用UIを非表示にする

属性 pagemax-hiddenを利用する。

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    pagemax-hidden
    ></mf-search-box>

レンダリング結果

画像サイズの選択用UIを非表示にする

属性 imgsize-hiddenを利用する。

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    imgsize-hidden
    ></mf-search-box>

レンダリング結果

カテゴリ、検索結果並び順、ページ毎の表示件数、画像サイズの選択用UIを非表示にする

属性 options-hiddenを利用する。

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    options-hidden
    ></mf-search-box>

レンダリング結果

文書種別選択用UIを非表示にする

属性 doctype-hiddenを利用する。

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    doctype-hidden
    ></mf-search-box>

レンダリング結果

検索ボタンのテキストを属性「submit-text」でカスタマイズ

属性 submit-textを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-submit-text .mf_finder_searchBox_submit span {
      background-color: pink;
      color: black;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-submit-text"
    submit-text="test"
    ></mf-search-box>

レンダリング結果

文書種別選択用セレクトボックスのAll用表示テキストをカスタマイズ

属性 doctype-all-textを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-doctype-all-text .mf_finder_searchBox_doctype_select {
      background-color: pink;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-doctype-all-text"
    doctype-all-text="全て"
    ></mf-search-box>

レンダリング結果

カテゴリ選択用セレクトボックスのAll Category用表示テキストをカスタマイズ

属性 category-all-textを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-category-all-text .mf_finder_searchBox_category_select {
      background-color: pink;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-category-all-text"
    category-all-text="全カテゴリ"
    ></mf-search-box>

レンダリング結果

検索結果並び順選択用セレクトボックスの表示テキストをカスタマイズ

属性 sort-text-csvを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-sort-text-csv .mf_finder_searchBox_sort_select {
      background-color: pink;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-sort-text-csv"
    sort-text-csv="マッチ順,日時順"
    ></mf-search-box>

レンダリング結果

ページ毎表示件数の選択肢をカスタマイズ

属性 pagemax-csvを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-pagemax-csv .mf_finder_searchBox_pagemax_select {
      background-color: pink;
    }
    </style>

html

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-pagemax-csv"
    pagemax-csv="10,50,100"
    ></mf-search-box>

レンダリング結果

画像サイズ選択用セレクトボックスの表示テキストをカスタマイズ

属性 imgsize-text-csvを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-imgsize-text-csv .mf_finder_searchBox_imgsize_select {
      background-color: pink;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-imgsize-text-csv"
    imgsize-text-csv="画像なし,画像小,画像中,画像大"
    ></mf-search-box>

レンダリング結果

検索条件選択用UIにセレクトボックスでなくリンクを使う

属性 use-linksを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-use-links .mf_finder_searchBox_links {
      background-color: pink;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-use-links"
    use-links
    ></mf-search-box>

レンダリング結果

リンクを使う場合の表示言語設定

属性 use-links でリンク表示にした場合は、 属性lang をカスタムエレメントの上位のエレメント(bodyでもよい)またはカスタムエレメント自体に 設定することで、リンクの表示言語を切り替えることができる。

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    use-links
    lang="ja"
    ></mf-search-box>

レンダリング結果

検索条件選択用UIにセレクトボックスのトグル表示を使う

属性 use-toggleを利用する。

コード(css追加)

    <style>
    /* 変更箇所の背景色をピンクに(実際は不要) */
    .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_toggle * {
      background-color: pink;
    }
    .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_misc {
      background-color: pink;
    }
    </style>

コード(html)

    <mf-search-box ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
    class="my-use-toggle"
    use-toggle
    ></mf-search-box>

レンダリング結果

検索結果