ヒントとコツ

その1

options-hidden、doctype-hiddenとuse-alt-submit-btnを一緒に使って、シンプルな検索窓を作ることが出来ます。

例

<mf-search-box
options-hidden
doctype-hidden
use-alt-submit-btn
></mf-search-box>

結果：

その2

基本的に同じ属性は設定しないと思いますが、下記コードのように設定した場合は、先に定義した設定が優先的に表示されます。
※検索ボタンのテキストを設定しています。

例

<mf-search-box
submit-btn-text="検索"
submit-btn-text="検索する"
></mf-search-box>

結果：

その3

同じページ内でsearch-boxを複数個使用する場合、属性results-page-urlを片方に設定していると、もう片方で検索した時もその設定が反映されます。

例

<div class="container">
  <div class="header">
    <mf-search-box
    ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search"
    results-page-url="{検索結果ページのURL}"
    target-blank
    ></mf-search-box>
  </div>
  <div class="main">
    <mf-search-box
    ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search"
    ></mf-search-box>
  </div>
</div>

• header内の検索窓で検索した場合、別タブで指定した検索結果ページへ遷移します。
• main内の検索窓で検索した場合、同一タブでheaderの検索窓で設定した検索結果ページへ遷移します。