1. 検索窓を設置する Ver.1 ( 必須・初期バージョン )

1. 検索窓を設置する Ver.1 ( 必須・初期バージョン )

ステップ1★検索窓を表示したいhtmlファイルにタグを埋め込む


1) 検索窓を表示したいhtmlファイル(例 window.html)の<head>~</head>の中に、

以下のタグを埋め込んでください。 

<!-- ↓CSS -->

<link href="https://ce.mf.marsflag.com/latest/css/mf-search.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">


2)検索窓を表示したいhtmlファイル(例 window.html)の<body>~</body>の中に、以下のタグを埋め込んでください。 

 <div class="mf_finder_container">

      <!-- ↓検索窓用カスタムエレメント -->

      <mf-search-box

      submit-text=""

      ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search"

      serp-url="//xxxx.marsflag.com/result.html#/"

      ></mf-search-box>

</div>


※{サービス識別名}の部分は、お客様自身のサービス識別名の入力をお願いいたします。サービス識別名は、Mars Finderのサービス一覧内の「検索API URL」を押下することでご確認頂けます。

青字の部分はお客様によって異なります。

緑字の部分は検索結果を表示したいhtmlのパス名またはファイル名となります。(フルパスを推奨します。)


3) 検索窓を表示したいhtmlファイル(例 window.html)の</body>の直前に、以下のタグを埋め込んでください。

<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>


4) 完成イメージ


注意事項:
mf_finder_containerや mf_finder_header内は、DOMが再構築されるので、他のHTML要素を記述しないよう、お願いいたします。
お客様サイトにて最新版でないVue2 をご利用の場合には、誤動作する可能性がございますので、最新版の 2.7.16へアップデート頂くことをお願いいたします。

marsfinder off/on は、これらクラス適用された要素内に配置すると動作しません。

参考:
FAQ->mf-search.cssやmf-search.jsを埋め込む際、charsetを省略してよいですか