<mf-search-box></mf-search-box>

検索窓表示用エレメント
使用例

指定可能な属性

• lang (String)
  表示言語を属性langで指定することが出来る。
  使用例

• ajax-url (String) [required]
  ajax検索用URL （検索窓ページと検索結果ページでは、同じ値を指定する）

• serp-url (String)
  遷移先検索結果ページURL

• iframe (String)
  遷移先検索結果ページの表示先iframeを指定するCSSセレクタ

• use-std-serp (Boolean)
  ajax_urlに対応する従来の検索結果画面に遷移する

• submit-text (String)
  submitボタン用テキスト
  (default: “search”)
  使用例

• doctype-all-text (String)
  文書種別(All)の選択肢表示に使うテキスト
  (default: “All”)
  使用例

• doctype-csv (String: “<String>,<String>,…”)
  文書種別の選択肢リスト
  html,pdf,doc,xls,pptの組み合わせ
  (default: “html,pdf,doc,xls,ppt”)

• force-doctype-csv (String: “<String>,<String>,…”)
  文書種別の選択肢リスト(検索結果に含まれる文書種別リストよりも優先される)
  html,pdf,doc,xls,pptの組み合わせ
  (default: “html,pdf,doc,xls,ppt”)

• doctype-default (String)
  文書種別のデフォルト値
  (example: “pdf”)

• doctype-hidden (Boolean)
  文書種別選択用UIを非表示にする
  使用例

• category-csv (String: “<String>,<String>,…”)
  カテゴリのリスト(検索結果に含まれるカテゴリ情報で上書きされる)
  (example: “MARS FINDER, MARS QUALITY”)

• force-category-csv (String: “<String>,<String>,…”)
  カテゴリのリスト(検索結果に含まれるカテゴリ情報よりも優先される)
  (example: “MARS FINDER, MARS QUALITY”)

• category-default (String)
  カテゴリのデフォルト値
  (default: “”)

• category-all-text (String)
  カテゴリ選択用セレクトボックスの「カテゴリ絞り込み無し」に表示する文字列
  (default: “ALL Category”)
  使用例

• disable-category-all (Boolean)
  カテゴリ選択用UIの選択肢に「カテゴリ絞り込み無し」を含めないようにする。

• category-hidden (Boolean)
  カテゴリ選択用UIを非表示にする
  使用例

• sort-default (String: 0:マッチ順 1:更新日時順)
  検索結果の並び順
  (default: “0”)

• sort-text-csv (String: “<String>,<String>”)
  並び順選択用セレクトボックスに表示する文字列のCSV
  属性use-linksを指定したときの択一式ボタン風リンクのテキストを変更したい場合は、この属性ではなくCSSで行うこと。
  (default: “match,recent”)
  使用例

• sort-hidden (Boolean)
  並び順選択用UIを非表示にする
  使用例

• pagemax-csv (String: “<Number>,<Number>,…”)
  ページ毎の表示件数の選択肢リスト
  (default: “10,20,30”)
  使用例

• pagemax-default (String: “<Number>”)
  ページ毎の表示件数のデフォルト値
  (default: “10”)

• pagemax-hidden (Boolean)
  表示件数選択用UIを非表示にする
  使用例

• imgsize-default (String: 0:画像無し, 1:96x72, 2:120x90, 3:200x150)
  画像サイズのデフォルト値
  (default: “1”)

• imgsize-text-csv (String: “<String>,<String>,<String>,<String>”)
  画像サイズ選択用セレクトボックスに表示する文字列のCSV
  属性use-linksを指定したときの択一式ボタン風リンクのテキストを変更したい場合は、この属性ではなくCSSで行うこと。
  (default: “none,small,medium,large”)
  使用例

• imgsize-hidden (Boolean)
  画像サイズ選択用UIを非表示にする
  使用例

• options-hidden (Boolean)
  カテゴリ、検索結果の並び順、ページ毎の表時件数、画像サイズの選択用UIを親エレメントも含めて非表示にする
  使用例

• :suggest-max (Number >=0)
  インテリアドバイザの表示件数
  (default: 10)

• disable-pagelog (Boolean)
  検索結果ページ(mfx-serp.jsを使用したページ)でのページログを無効にする

• enable-pagelog (Boolean)
  検索窓ページ(mfx-sbox.jsを使用したページ)でのページログを有効にする

• use-links (Boolean)
  検索条件選択用UIにセレクトボックスでなく択一式ボタン風リンクを使う場合に設定する
  使用例

  また、択一式ボタン風リンクの表示言語は属性langで指定することが出来る。
  使用例

• use-toggle (Boolean)
  検索条件選択用UIにセレクトボックスのトグル表示を使う場合に設定する
  使用例

• submit-callback (String)
  submit時のコールバック関数名
  window["<submit-callback>"]()で実行されるので、別途定義しておくこと

• :on-submit-func (Function: window.<関数名> など)
  submit時のコールバック関数
  あらかじめjsでwindowオブジェクトから辿り着ける場所に関数定義しておくこと
  属性submit-callbackが正しく設定されている場合は使用されない。

• target-blank (Boolean)
  検索結果ページを別ウィンドウで表示する
  この機能を使う場合は、属性serp-url または 属性use-std-serp のいずれかを設定すること

• result-callback (String)
  検索結果受信時のコールバック関数名
  window["<result-callback>"]()で実行されるので、別途定義しておくこと

• :on-result-func (Function: window.<関数名> など)
  検索結果受信時のコールバック関数
  あらかじめjsでwindowオブジェクトから辿り着ける場所に関数定義しておくこと
  属性result-callbackが正しく設定されている場合は使用されない。

• ignore-search-result (Boolean)
  検索結果受信時にデータをフォームへ反映させず無視する

• placeholder (String)
  検索語入力フィールドのinput要素のplaceholder属性に設定する値
  使用例

• input-title (String)
  検索語入力フィールドのinput要素のtitle属性に設定する値
  使用例

• disable-suggest-cursor (String)
  インテリアドバイザの候補を上下矢印キーで選択できる機能を無効にする

サンプル集

機能とデザインのカスタマイズについて、いくつかのサンプルを以下に載せました。

• サンプル集

DOM構造とclass設定

• div.mf_finder_searchBox
  .mf_finder_searchBox_focusInput フォーカス時に設定されるクラス
  .mf_finder_searchBox_hasQuery 検索語入力フィールドが空でないときに設定されるクラス
  .mf_finder_searchBox_useLinks 属性use-linksが設定されているときに設定されるクラス
  .mf_finder_searchBox_useSelects 属性use-linksも属性use-toggleも設定されていないときに設定されるクラス
  .mf_finder_searchBox_useToggle 属性use-toggleが設定されているときに設定されるクラス
  .mf_finder_searchBox_useToggle_show ツールバー表示のために設定されるクラス
  • form.mf_finder_searchBox_form
    • input :ページ番号用パラメタpageをリセットするためのinput hidden
    • input :ドリルダウン用パラメタdの値を引き継ぐためのinput hidden
    • div.mf_finder_searchBox_items_wrapper > div.mf_finder_searchBox_items
      • label.mf_finder_searchBox_doctype :文書種別選択用UI (属性use-toggleが設定されている場合は空)
        .mf_finder_searchBox_select_label_mod 文書種別変更後にまだ再検索していない場合に設定されるクラス
        • select.mf_finder_searchBox_doctype_select
          • option :文書種別絞り込み無し用
            • [属性doctype-all-textの値]
          • option (複数)
            • [文書種別]
      • div.mf_finder_searchBox_query_wrap
        • input.mf_finder_searchBox_query_input :検索語入力フィールド
        • ul.mf_finder_searchBox_suggest_items :検索語入力中に表示されるサジェストリスト
          • li.mf_finder_searchBox_suggest_item
            .mf_finder_searchBox_suggest_item_cur 選択状態のエントリに設定されるクラス。カーソル上下移動かマウスオーバーでエントリが選択される。
            • a.mf_finder_searchBox_suggest_link > [キーワード候補]
      • button.mf_finder_searchBox_submit
        • span > [属性submit-textの値]
    • div.mf_finder_searchBox_selects (属性use-linksが設定されている場合は空)
      • label.mf_finder_searchBox_category :(属性category-csvが設定されていない場合は空)
        .mf_finder_searchBox_select_label_mod カテゴリ変更後にまだ再検索していない場合に設定されるクラス
        • select.mf_finder_searchBox_category_select :カテゴリ絞り込み用セレクトボックス
          • option.mf_finder_searchBox_category_opt_0 :カテゴリ絞り込み無し用
            • [属性category-all-textの値]
          • option.mf_finder_searchBox_category_opt_N (複数) :カテゴリ選択用
            • [属性category-csvのN番目の値]
      • div.mf_finder_searchBox_toggle (属性use-toggleが設定されていない場合は空)
        • a div.mf_finder_searchBox の .mf_finder_searchBox_show_toolbar をトグルするリンク
      • div.mf_finder_searchBox_misc
        • label.mf_finder_searchBox_doctype (文書種別選択用UI 属性use-toggleが設定されていない場合は空)
          .mf_finder_searchBox_select_label_mod 文書種別変更後にまだ再検索していない場合に設定されるクラス
          • select.mf_finder_searchBox_doctype_select
            • option :文書種別絞り込み無し用
              • [属性doctype-all-textの値]
            • option (複数)
              • [文書種別]
        • label.mf_finder_searchBox_sort
          .mf_finder_searchBox_select_label_mod 並び順変更後にまだ再検索していない場合に設定されるクラス
          • select.mf_finder_searchBox_sort_select :並び順変更用セレクトボックス
            • option.mf_finder_searchBox_sort_opt_0 :マッチ順選択用
              • [属性sort-text-csvの1番目の値]
            • option.mf_finder_searchBox_sort_opt_1 :新着順選択用
              • [属性sort-text-csvの2番目の値]
        • label.mf_finder_searchBox_pagemax
          .mf_finder_searchBox_select_label_mod ページ毎表示件数の変更後にまだ再検索していない場合に設定されるクラス
          • select.mf_finder_searchBox_pagemax_select :ページ毎表時件数変更用セレクトボックス
            • option.mf_finder_searchBox_pagemax_opt_N (複数) :ページ毎表時件数選択用
              • [属性pagemax-csvのN番目の値]
        • label.mf_finder_searchBox_imgsize
          .mf_finder_searchBox_select_label_mod 画像サイズ変更後にまだ再検索していない場合に設定されるクラス
          • select.mf_finder_searchBox_imgsize_select :画像サイズ変更用セレクトボックス
            • option.mf_finder_searchBox_imgsize_opt_0 :画像無し選択用
              • [属性imgsize-text-csvの1番目の値]
            • option.mf_finder_searchBox_imgsize_opt_1 :画像サイズ小選択用
              • [属性imgsize-text-csvの2番目の値]
            • option.mf_finder_searchBox_imgsize_opt_2 :画像サイズ中選択用
              • [属性imgsize-text-csvの3番目の値]
            • option.mf_finder_searchBox_imgsize_opt_3 :画像サイズ大選択用
              • [属性imgsize-text-csvの4番目の値]
    • div.mf_finder_searchBox_links (属性use-linksが設定されていない場合は空)
      • div.mf_finder_searchBox_category (属性category-csvが設定されていない場合は空)
        • input :カテゴリ指定用パラメタctの値を引き継ぐためのinput hidden
        • div.mf_finder_searchBox_category_links
          • div.mf_finder_searchBox_category_link_0
            • a :カテゴリ絞り込み無し用リンク
              .mf_finder_searchBox_link_current 現在選択中のカテゴリに設定されるクラス
          • div.mf_finder_searchBox_category_link_N
            • a :N番目のカテゴリ選択用リンク
              .mf_finder_searchBox_link_current 現在選択中のカテゴリに設定されるクラス
              • [属性category-csvのN番目の値]
      • div.mf_finder_searchBox_sort
        • input :並び順指定用パラメタsortの値を引き継ぐためのinput hidden
        • div.mf_finder_searchBox_sort_links :並び順選択用
          • div.mf_finder_searchBox_sort_link_0
            • a :マッチ順選択用リンク
              .mf_finder_searchBox_link_current 現在選択中の並び順に設定されるクラス
              • [属性sort-text-csvの1番目の値]
          • div.mf_finder_searchBox_sort_link_1
            • a :新着順選択用リンク
              .mf_finder_searchBox_link_current 現在選択中の並び順に設定されるクラス
              • [属性sort-text-csvの2番目の値]
      • div.mf_finder_searchBox_pagemax
        • input :ページ毎表示件数指定用パラメタpagemaxの値を引き継ぐためのinput hidden
        • div.mf_finder_searchBox_pagemax_links :ページ毎表示件数選択用
          • div.mf_finder_searchBox_pagemax_link_N (複数)
            • a :N番目のページ毎表示件数選択用リンク
              .mf_finder_searchBox_link_current 現在選択中の並び順に設定されるクラス
              • [属性pagemax-csvのN番目の値]
      • div.mf_finder_searchBox_imgsize
        • input :画像サイズ指定用パラメタimgsizeの値を引き継ぐためのinput hidden
        • div.mf_finder_searchBox_imgsize_links
          • div.mf_finder_searchBox_imgsize_link_0
            • a :画像無し選択用リンク
              .mf_finder_searchBox_link_current 現在選択中のimgsizeに設定されるクラス
              • [属性imgsize-text-csvの1番目の値]
          • div.mf_finder_searchBox_imgsize_link_1
            • a :画像サイズ小選択用リンク
              .mf_finder_searchBox_link_current 現在選択中のimgsizeに設定されるクラス
              • [属性imgsize-text-csvの2番目の値]
          • div.mf_finder_searchBox_imgsize_link_2
            • a :画像サイズ中選択用リンク
              .mf_finder_searchBox_link_current 現在選択中のimgsizeに設定されるクラス
              • [属性imgsize-text-csvの3番目の値]
          • div.mf_finder_searchBox_imgsize_link_3
            • a :画像サイズ大選択用リンク
              .mf_finder_searchBox_link_current 現在選択中のimgsizeに設定されるクラス
              • [属性imgsize-text-csvの4番目の値]