実装例

検索窓の例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

        <!-- ↓検索窓用カスタムエレメント -->
        <mf-search-box
           submit-text=""
           ajax-url="//mf2demo.marsflag.com/vul_test__vul_test__vul_test/x_search.x"
           serp-url="minimum.html#/"
           doctype-hidden
           options-hidden
        ></mf-search-box>

	</div>

    <!-- ↓MF検索窓用js -->
    <script src="//c.marsflag.com/mf/mfx/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

検索結果ページの例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

        <!-- ↓検索窓用カスタムエレメント -->
        <mf-search-box
           submit-text=""
           ajax-url="//mf2demo.marsflag.com/vul_test__vul_test__vul_test/x_search.x"
           doctype-csv="html,pdf"
           category-csv="MARS FINDER, MARS PRODUCT SEARCH, MARS EXPLORER, MARS QUALITY"
        ></mf-search-box>

        <!-- ↓ずばけん用カスタムエレメント -->
        <mf-zubaken></mf-zubaken>

        <!-- ↓オーガニック用エレメント -->
        <mf-search-results></mf-search-results>

	</div>

	<!-- ↓MF検索結果画面用js -->
    <script src="//c.marsflag.com/mf/mfx/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>

作り方

基本ルール

検索窓の設置の仕方

<script src="//c.marsflag.com/mf/mfx/js/mfx-sbox.js" charset="UTF-8"></script> をbodyの最後に入れる。

検索窓用カスタムエレメント <mf-search-box></mf-search-box>

.mf_finder_container の配下に設置する。

検索窓用カスタムエレメント APIドキュメント

検索結果ページの作り方

<script src="//c.marsflag.com/mf/mfx/js/mfx-serp.js" charset="UTF-8"></script>
をbodyの最後に入れる。

検索窓用カスタムエレメント <mf-search-box></mf-search-box>

.mf_finder_container の配下に設置する。

検索窓用カスタムエレメント APIドキュメント

検索結果用カスタムエレメント <mf-search-results></mf-search-results>

.mf_finder_container の配下に設置する。

検索結果用カスタムエレメント APIドキュメント

ずばケン用カスタムエレメント <mf-zubaken></mf-zubaken>

.mf_finder_container の配下に設置する。

ずばケン用カスタムエレメント APIドキュメント

デフォルトCSS

検索窓用

検索窓、検索結果兼用

応用版

従来の検索結果画面へ遷移する検索窓

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page_classic</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

        <!-- ↓検索窓用カスタムエレメント -->
        <mf-search-box
           submit-text=""
           ajax-url="//mf2demo.marsflag.com/vul_test__vul_test__vul_test/x_search.x"
           doctype-hidden
           options-hidden
           use-std-serp
        ></mf-search-box>
    </div>

    <!-- ↓MF検索窓用js -->
    <script type="text/javascript" src="//c.marsflag.com/mf/mfx/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

ハッシュを使わずに、クエリストリングでパラメタを受け渡す検索結果ページ

Google Custom Search用の検索結果ページをこれで置き換えれば、検索窓をそのまま流用可能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum_nohash</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

      <!-- ↓検索窓用カスタムエレメント -->
      <mf-search-box
         submit-text=""
         ajax-url="//mf2demo.marsflag.com/vul_test__vul_test__vul_test/x_search.x"
         doctype-csv="html,pdf"
         category-csv="MARS FINDER, MARS PRODUCT SEARCH, MARS EXPLORER, MARS QUALITY"
         ></mf-search-box>

      <!-- ↓ずばけん用カスタムエレメント -->
      <mf-zubaken></mf-zubaken>

      <!-- ↓オーガニック用エレメント -->
      <mf-search-results></mf-search-results>

    </div>
	
    <!-- ↓ハッシュを使わずにクエリストリングでパラメタを管理する場合に記述 -->
    <script type="text/javascript">
    !function(){
      var G = GALFSRAM = window.GALFSRAM || {}
      G.mfx = G.mfx || {}
      G.mfx.router_mode = 'history'
    }();
    </script>

	<!-- ↓MF検索結果画面用js -->
    <script src="//c.marsflag.com/mf/mfx/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>

検索結果をiframeでオーバーレイ表示する検索窓