ヒントとコツ

その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の検索窓で設定した検索結果ページへ遷移します。

その4

同じページに複数の検索窓を置き、それぞれ別の検索サービス（別の結果）にしたいときは、窓ごとに違う ajax-url を付け、mf-search-results の ajax-url は、その結果ブロックに紐づける検索窓と同じにしてください。

初回（URL に q= があるときなど）は従来どおり全窓に同じ語が入ります。検索を一度実行したあとは、ページネーションなどで URL が変わっても、別 ajax-url の窓には他窓のキーワードが勝手に入り直しません。

特定の検索窓だけURL や共通の検索状態を入力に反映させたくないときは、その mf-search-box に ignore-search-results を付けられます（検索結果をフォームに反映しない指定です。詳細は属性の説明を参照）。

同一ページ内でハッシュだけ変えたくて、検索 API を毎回叩かせたくないときは mf-search-results に ignore-url-change を付けられます（ドメインとパスが同じあいだ再取得を抑止）。