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

Search window element Example of use

Applicable attributes

• lang (String)
  You can specify the display language with attribute lang.
  Example of use

• ajax-url (String) [required]
  ajax Search URL

• serp-url (String)
  Destination URL of search result page transition

• iframe (String)
  CSS selector that specifies the destination iframe of the transition destination of search result page

• use-std-serp (Boolean)
  Transit to the conventional search result screen corresponding to ajax_url

• submit-text (String)
  Text for submit button
  (default: “search”)
  Example of use

• doctype-all-text (String)
  Text to be used for the option to display all document type
  (default: “All”)
  Example

• doctype-csv (String: “<String>,<String>,…”)
  List of options for document type
  Combinations of html,pdf, doc,xls, ppt
  (default: “html, pdf, doc, xls, ppt”)

• force-doctype-csv (String: “<String>,<String>,…”)
  An option list of document type (prior to the document type, list included in the search result)
  Combinations of html,pdf, doc,xls, ppt
  (default: “html, pdf, doc, xls, ppt”)

• doctype-default (String)
  Default value of document type
  (example: “pdf”)

• doctype-hidden (Boolean)
  Hide the document type filter module out of other search box filters
  Example

• category-csv (String: “<String>,<String>,…”)
  List of categories (overwritten by category information included in search results)
  (example: “MARS FINDER, MARS QUALITY”)

• force-category-csv (String: “<String>,<String>,…”)
  List of categories (Overrides Category information included in search results)
  (example: “MARS FINDER, MARS QUALITY”)

• category-default (String)
  Category default value
  (default: “”)

• category-all-text (String)
  ”All Category” selection in the category selection box
  (default: “ALL Category”)
  Example of use

• category-hidden (Boolean)
  Hide the category selection box
  Example of use

• sort-default (String: 0: Match order 1: Update date order)
  The order of search results
  (default: “0”)

• sort-text-csv (String: “<String>,<String>”)
  CSV of the character string to be displayed in the display order selection box
  Radio button link text specified by attribute use-links can’t be changed here but can be done by CSS
  (default: “match,recent”)
  Example

• sort-hidden (Boolean)
  Hide the sorting selection box
  Example of use

• pagemax-csv (String: “<Number>,<Number>,…”)
  List of the max search results displayed per page
  (default: “10, 20, 30”)
  Example of use

• pagemax-default (String: “<Number>”)
  Default value of the number of displayed items per page
  (default: “10”)

• pagemax-hidden (Boolean)
  Hide the display number selection box
  Example of use

• imgsize-default (String: 0: no image, 1:96x72, 2:120x90, 3:200x150)
  Default value of image size
  (default: “1”)

• imgsize-text-csv (String: “<String>,<String>,<String>,<String>”)
  Comma-seperated character string to be displayed in the image size selection box
  Radio button text specified by the attribute use-links needs to be changed by CSS
  (default: “none, small, medium, large”)
  Example of use

• imgsize-hidden (Boolean)
  Hide the image size selection label
  Example of use

• options-hidden (Boolean)
  Hide the Category, Order of search result, Max display number per page, Image size, selection labels including their parent element
  Example of use

• :suggest-max (Number >=0)
  Max number of intelligent advisors display
  (default: 10)

• disable-pagelog (Boolean)
  Disable page log

• use-links (Boolean)
  Set search condition selection element as listed links instead of dropdown
  Example of use

  In addition, the display language of the selection module can be specified with attribute lang.
  Example of use

• use-toggle (Boolean)
  Set to use toggle display of search condition selection element
  Example of use

• submit-callback (String)
  Callback function name when submitting
  Executed with window["<submit-callback>"](), must be defined separately

• :on-submit-func (Function: window.<function name>, etc.)
  Callback function when submitting
  It is necessary to predefine a function at the location that js can reach from the window object
  It does not work if the attribute submit-callback is set correctly.

• result-callback (String)
  Callback function name when retrieval result is received
  Since it is executed with window["<result-callback>"](), you must define it separately

• :on-result-func (Function: window. <function name>, etc.)
  Callback function when receiving search results
  It is necessary to predefine a function at the location that js can reach from the window object
  It does not work if the attribute result-callback is set correctly.

• ignore-search-result (Boolean)
  Set to not reflecting the searched keyword into the search box when receiving the search result data

• placeholder (String)
  The value to set in the placeholder attribute of the search keyword input element
  Example of use

• input-title (String)
  The value to set in the title attribute of the search keyword input element
  Example of use

sample collection

Several examples of function and design customization are listed below.

• sample collection

DOM structure and class setting

• div.mf_finder_searchBox
  .mf_finder_searchBox_focusInput Classes set at focus
  .mf_finder_searchBox_hasQuery Classes set when the search term input field is not empty
  .mf_finder_searchBox_useLinks Class set when the attribute use-links is set
  .mf_finder_searchBox_useSelects Class set when neither Attribute use-links nor attributeuse-toggle is set
  .mf_finder_searchBox_useToggle Classes set when the attribute use-toggle is set
  .mf_finder_searchBox_useToggle_show Classes set for show the toolbar of toggle
  • form.mf_finder_searchBox_form
    • input: input hidden to reset the page number parameter page
    • input: input hidden to inherit the value of the drill-down parameter d
    • div.mf_finder_searchBox_items_wrapper > div.mf_finder_searchBox_items
      • label.mf_finder_searchBox_doctype: Document type selection box (empty if attribute use-toggle is set)
        .mf_finder_searchBox_select_label_mod Classes set when not re-searched yet after changing document type selection
        • select.mf_finder_searchBox_doctype_select
          • option: Document type No narrow down
            • [Value of attribute doctype-all-text]
          • option (plural)
            • [document type]
      • div.mf_finder_searchBox_query_wrap
        • input.mf_finder_searchBox_query_input: search term input field
        • ul.mf_finder_searchBox_suggest_items: Suggest list displayed during search term entry
          • li.mf_finder_searchBox_suggest_item
            .mf_finder_searchBox_suggest_item_cur Class to be set for selected entry. An entry is selected by moving the cursor up or down or by mouse over.
            • a.mf_finder_searchBox_suggest_link > [suggested keyword candidate]
      • button.mf_finder_searchBox_submit
        • span > [Value of attribute submit-text]
    • div.mf_finder_searchBox_selects (empty if attribute use-linksis set)
      • label.mf_finder_searchBox_category: (empty if attribute category-csv is not set)
        .mf_finder_searchBox_select_label_mod Classe to be set when not re-searched yet after changing category selection
        • select.mf_finder_searchBox_category_select: Category selection box
          • option.mf_finder_searchBox_category_opt_0: No category narrowing down
            • [Value of attribute category-all-text]
          • option.mf_finder_searchBox_category_opt_N (plural): for category selection
            • the Nth value of attribute category-csv]
      • div.mf_finder_searchBox_toggle (empty if Attribute use-toggle is not set)
        • a Link to toggle .mf_finder_searchBox_show_toolbar of div.mf_finder_searchBox
      • div.mf_finder_searchBox_misc
        • label.mf_finder_searchBox_doctype (document type selection box, empty if attribute use-toggle is not set)
          .mf_finder_searchBox_select_label_mod Classe to be set when not re-searched yet after changing document type selection
          • select.mf_finder_searchBox_doctype_select
            • option: Document type No narrow down
              • [Value of attribute doctype-all-text]
            • option (plural)
              • [document type]
        • label.mf_finder_searchBox_sort
          .mf_finder_searchBox_select_label_mod Class to be set when not re-searched yet after changing sort order selection
          • select.mf_finder_searchBox_sort_select: Sort order change box
            • option.mf_finder_searchBox_sort_opt_0: Seletion of matching order
              • [the 1st value of attribute sort-text-csv]
            • option.mf_finder_searchBox_sort_opt_1: Selection of lastest update order
              • [the 2nd value of attribute sort-text-csv]
        • label.mf_finder_searchBox_pagemax
          .mf_finder_searchBox_select_label_mod Class to be set when not re-searched yet after changing the max number selection of items to be displayed per page
          • select.mf_finder_searchBox_pagemax_select: Selection box for changing the max number of search results to be displayed per page
            • option.mf_finder_searchBox_pagemax_opt_N (plural): Options of max number of search result display seletion box
              • [Nth value of Attribute pagemax-csv ]
        • label.mf_finder_searchBox_imgsize
          .mf_finder_searchBox_select_label_mod Class to be set when not re-searched yet after changing image size selection
          • select.mf_finder_searchBox_imgsize_select: Change image size selection box
            • option.mf_finder_searchBox_imgsize_opt_0: No image display selection
              • [The 1st value of attribute imgsize-text-csv]
            • option.mf_finder_searchBox_imgsize_opt_1: Small size image display selection
              • [The 2nd value of attribute imgsize-text-csv]
            • option.mf_finder_searchBox_imgsize_opt_2: Middle size image display selection
              • [The 3rd value of attribute imgsize-text-csv]
            • option.mf_finder_searchBox_imgsize_opt_3: Large size image display selection
              • [The 4th value of attribute imgsize-text-csv]
    • div.mf_finder_searchBox_links (empty if attribute use-links is not set)
      • div.mf_finder_searchBox_category (empty if attribute category-csv is not set)
        • input: input hidden to inherit the value of category specification parameter ct
        • div.mf_finder_searchBox_category_links
          • div.mf_finder_searchBox_category_link_ 0
            • a: Category No narrow down link
              .mf_finder_searchBox_link_current Class to be set to currently selected category
          • div.mf_finder_searchBox_category_link_N
            • a: Nth category selection link
              .mf_finder_searchBox_link_current Class to be set to currently selected category
              • [the Nth value of attribute category-csv]
      • div.mf_finder_searchBox_sort
        • input: input hidden to inherit the value of the sort order specification parameter sort
        • div.mf_finder_searchBox_sort_links: Change sorting order selection
          • div.mf_finder_searchBox_sort_link_0
            • a: Sort by matching order option
              .mf_finder_searchBox_link_current Class to be set to the currently selected sorting order
              • [the 1st value of attribute sort-text-csv]
          • div.mf_finder_searchBox_sort_link_1
            • a: Sort by latested update order option
              .mf_finder_searchBox_link_current Class to be set to the currently selected sorting order
              • [the 2nd value of attribute sort-text-csv]
      • div.mf_finder_searchBox_pagemax
        • input: input hidden to inherit the value of Max number per page specification parameter pagemax
        • div.mf_finder_searchBox_pagemax_links: Max number per page display of search results selection links
          • div.mf_finder_searchBox_pagemax_link_N (plural)
            • a: the Nth option of max number selection link
              .mf_finder_searchBox_link_current Class to be set to the currently selected option
              • [the Nth value of attribute pagemax-csv]
      • div.mf_finder_searchBox_imgsize
        • input: input hidden to inherit the value of parameter imgsize for specifying image size
        • div.mf_finder_searchBox_imgsize_links
          • div.mf_finder_searchBox_imgsize_link_ 0
            • a: No image selection link
              .mf_finder_searchBox_link_current Class set to currently selected imgsize link
              • [the 1st value of attribute imgsize-text-csv]
          • div.mf_finder_searchBox_imgsize_link_1
            • a: Image size small selection link
              .mf_finder_searchBox_link_current Class set to currently selected imgsize link
              • [the 2nd value of attribute imgsize-text-csv]
          • div.mf_finder_searchBox_imgsize_link_2
            • a: Image size middle selection link
              .mf_finder_searchBox_link_current Class set to currently selected imgsize link
              • [the 3rd value of attribute imgsize-text-csv]
          • div.mf_finder_searchBox_imgsize_link_3
            • a: Image size large selection link
              .mf_finder_searchBox_link_current Class set to currently selected imgsize link
              • [the 4th value of attribute imgsize-text-csv]