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

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

指定可能な属性

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

• ajax-url (String) [required] ajax 検索用 URL

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

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

• search-on-load (Boolean) 初回ロード時に検索語指定が無くても全件に対して検索を実行する

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

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

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

• 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:96x55, 2:120x68, 3:200x112) 画像サイズのデフォルト値 (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)

• 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を設定すること

• 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.mffinder_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_numberをリセットするための input hidden
    • input :ドリルダウン用パラメタdrilldownの値を引き継ぐための input hidden
    • div.mf_finder_searchBox_items_wrapper > div.mf_finder_searchBox_items
      • label.mffinder_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.mffinder_searchBox_query_input :検索語入力フィールド_
        • ul.mffinder_searchBox_suggest_items :検索語入力中に表示されるサジェストリスト_
          • li.mffinder_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.mffinder_searchBox_category :(属性category-csvが設定されていない場合は空) .mf_finder_searchBox_select_label_mod カテゴリ変更後にまだ再検索していない場合に設定されるクラス_
        • select.mffinder_searchBox_category_select :カテゴリ絞り込み用セレクトボックス_
          • option.mffinder_searchBox_category_opt_0 :カテゴリ絞り込み無し用_
            • [属性category-all-textの値]
          • option.mffinder_searchBox_category_optN (複数) :カテゴリ選択用
            • [属性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.mffinder_searchBox_doctype (文書種別選択用 UI 属性use-toggleが設定されていない場合は空) .mf_finder_searchBox_select_label_mod 文書種別変更後にまだ再検索していない場合に設定されるクラス_
          • select.mf_finder_searchBox_doctype_select
            • option :文書種別絞り込み無し用
              • [属性doctype-all-textの値]
            • option (複数)
              • [文書種別]
        • label.mffinder_searchBox_sort .mf_finder_searchBox_select_label_mod 並び順変更後にまだ再検索していない場合に設定されるクラス_
          • select.mffinder_searchBox_sort_select :並び順変更用セレクトボックス_
            • option.mffinder_searchBox_sort_opt_0 :マッチ順選択用_
              • [属性sort-text-csvの 1 番目の値]
            • option.mffinder_searchBox_sort_opt_1 :新着順選択用_
              • [属性sort-text-csvの 2 番目の値]
        • label.mffinder_searchBox_pagemax .mf_finder_searchBox_select_label_mod ページ毎表示件数の変更後にまだ再検索していない場合に設定されるクラス_
          • select.mffinder_searchBox_pagemax_select :ページ毎表時件数変更用セレクトボックス_
            • option.mffinder_searchBox_pagemax_optN (複数) :ページ毎表時件数選択用
              • [属性pagemax-csvのN番目の値]
        • label.mffinder_searchBox_imgsize .mf_finder_searchBox_select_label_mod 画像サイズ変更後にまだ再検索していない場合に設定されるクラス_
          • select.mffinder_searchBox_imgsize_select :画像サイズ変更用セレクトボックス_
            • option.mffinder_searchBox_imgsize_opt_0 :画像無し選択用_
              • [属性imgsize-text-csvの 1 番目の値]
            • option.mffinder_searchBox_imgsize_opt_1 :画像サイズ小選択用_
              • [属性imgsize-text-csvの 2 番目の値]
            • option.mffinder_searchBox_imgsize_opt_2 :画像サイズ中選択用_
              • [属性imgsize-text-csvの 3 番目の値]
            • option.mffinder_searchBox_imgsize_opt_3 :画像サイズ大選択用_
              • [属性imgsize-text-csvの 4 番目の値]
    • div.mf_finder_searchBox_links (属性use-linksが設定されていない場合は空)
      • div.mf_finder_searchBox_category (属性category-csvが設定されていない場合は空)
        • input :カテゴリ指定用パラメタcategoryの値を引き継ぐための input hidden
        • div.mf_finder_searchBox_category_links
          • div.mf_finder_searchBox_category_link_0
            • a :カテゴリ絞り込み無し用リンク .mffinder_searchBox_link_current 現在選択中のカテゴリに設定されるクラス_
          • div.mffinder_searchBox_category_linkN
            • a :N番目のカテゴリ選択用リンク .mffinder_searchBox_link_current 現在選択中のカテゴリに設定されるクラス_
              • [属性category-csvのN番目の値]
      • div.mf_finder_searchBox_sort
        • input : 並び順指定用パラメタsort_byの値を引き継ぐための input hidden
        • div.mffinder_searchBox_sort_links :並び順選択用_
          • div.mf_finder_searchBox_sort_link_0
            • a :マッチ順選択用リンク .mffinder_searchBox_link_current 現在選択中の並び順に設定されるクラス_
              • [属性sort-text-csvの 1 番目の値]
          • div.mf_finder_searchBox_sort_link_1
            • a :新着順選択用リンク .mffinder_searchBox_link_current 現在選択中の並び順に設定されるクラス_
              • [属性sort-text-csvの 2 番目の値]
      • div.mf_finder_searchBox_pagemax
        • input :ページ毎表示件数指定用パラメタnumber_per_pageの値を引き継ぐための input hidden
        • div.mffinder_searchBox_pagemax_links :ページ毎表示件数選択用_
          • div.mffinder_searchBox_pagemax_linkN (複数)
            • a :N番目のページ毎表示件数選択用リンク .mffinder_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 :画像無し選択用リンク .mffinder_searchBox_link_current 現在選択中の imgsize に設定されるクラス_
              • [属性imgsize-text-csvの 1 番目の値]
          • div.mf_finder_searchBox_imgsize_link_1
            • a :画像サイズ小選択用リンク .mffinder_searchBox_link_current 現在選択中の imgsize に設定されるクラス_
              • [属性imgsize-text-csvの 2 番目の値]
          • div.mf_finder_searchBox_imgsize_link_2
            • a :画像サイズ中選択用リンク .mffinder_searchBox_link_current 現在選択中の imgsize に設定されるクラス_
              • [属性imgsize-text-csvの 3 番目の値]
          • div.mf_finder_searchBox_imgsize_link_3
            • a :画像サイズ大選択用リンク .mffinder_searchBox_link_current 現在選択中の imgsize に設定されるクラス_
              • [属性imgsize-text-csvの 4 番目の値]

MF3.0 カスタムエレメントマニュアル ver. 1.0.3

リファレンスマニュアル内検索

< マニュアルトップに戻る