https://www.toho.co.jp/common/js/mf-search.js

1// =====================================================
2// MarsFlag 検索フォーム ブリッジ
3// =====================================================
4// デザイン要件で残しているネイティブ <form>+<input> と
5// MarsFlag のカスタム要素 <mf-search-box> を橋渡しするスクリプト。
6//
7// submit ボタン押下時にも、Enter キー押下時と同じ MarsFlag 検索遷移が
8// 発火するように、内部 input へ値を同期し Enter を疑似発火させる。
9//
10// 対象: ページ内に複数あっても OK。<form class="search-form"> かつ
11// 直下に <mf-search-box> を含むフォーム全てに一度だけバインドする。
12//
13// 注意: 公式 MarsFlag ライブラリも mf-search.js という名前ですが、
14// あちらは https://ce.mf.marsflag.com/... の CDN 上のものであり別物です。
15
16(function () {
17  'use strict';
18
19  function findMfInput(mfBox) {
20    if (!mfBox) return null;
21    if (mfBox.shadowRoot) {
22      const inShadow = mfBox.shadowRoot.querySelector('input');
23      if (inShadow) return inShadow;
24    }
25    return mfBox.querySelector('input');
26  }
27
28  function dispatchEnter(target) {
29    ['keydown', 'keypress', 'keyup'].forEach((type) => {
30      target.dispatchEvent(new KeyboardEvent(type, {
31        key: 'Enter',
32        code: 'Enter',
33        keyCode: 13,
34        which: 13,
35        bubbles: true,
36      }));
37    });
38  }
39
40  function bindForm(form) {
41    if (form.dataset.mfBridge === 'bound') return;
42
43    const nativeInput = form.querySelector('input[name="q"]');
44    const mfBox = form.querySelector('mf-search-box');
45    if (!nativeInput || !mfBox) return;
46
47    form.dataset.mfBridge = 'bound';
48
49    form.addEventListener('submit', (e) => {
50      const q = nativeInput.value.trim();
51      if (!q) {
52        e.preventDefault();
53        return;
54      }
55
56      const mfInput = findMfInput(mfBox);
57      if (!mfInput) return; // mf-search-box 未初期化時はネイティブ送信にフォールバック
58
59      e.preventDefault();
60      mfInput.value = q;
61      mfInput.dispatchEvent(new Event('input',  { bubbles: true }));
62      mfInput.dispatchEvent(new Event('change', { bubbles: true }));
63      dispatchEnter(mfInput);
64    });
65  }
66
67  function initializeMfSearch() {
68    document.querySelectorAll('form.search-form').forEach(bindForm);
69  }
70
71  window.initializeMfSearch = initializeMfSearch;
72})();