State without customization

Use custom element mf-search-box.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"></mf-search-box>

Render result

Typical example of search window to be installed on the upper right of the webpages

code

Add css

  <style>
  .my-search-box {
    width: 300px;
  }
  .my-search-box .mf_finder_searchBox_submit {
    padding: 0;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   options-hidden
   doctype-hidden
   ignore-search-result
   placeholder="In-site search"
   submit-text=""
   ></mf-search-box>

Render result

Ignore the data without reflecting it on the form when receiving the search result

Use the attribute ignore-search-result.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-ignore-search-result .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-ignore-search-result"
   ignore-search-result
   ></mf-search-box>

Render result

Customize placeholders in search term input area

Use attribute placeholder.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-placeholder .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-placeholder"
   placeholder="Key in here to search…"
   ></mf-search-box>

Render result

Customize attribute title in search term input area

Use attribute input-title.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-input-title .mf_finder_searchBox_query_input {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-input-title"
   placeholder="Mouse over here"
   input-title="Here is input area"
   ></mf-search-box>

Render result

Hide the category selection UI

Use attribute category-hidden.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   category-hidden
   ></mf-search-box>

Render result

Hide selection UI for search result sorting order

Use the attribute sort-hidden.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   sort-hidden
   ></mf-search-box>

Render result

Hide the UI for selecting the max number of displayed items per page

Use the attribute pagemax-hidden.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   pagemax-hidden
   ></mf-search-box>

Render result

Hide the UI for selecting the image size

Use attribute imgsize-hidden.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   imgsize-hidden
   ></mf-search-box>

Render result

Hide the all the UI for selecting categories, search result sorting order, number of display items per page, and image size

Use the attribute options-hidden.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   options-hidden
   ></mf-search-box>

Render result

Hide the document type selection UI

Use attribute doctype-hidden.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   doctype-hidden
   ></mf-search-box>

Render result

Customize the text of the search button with the attribute "submit-text"

Use the attribute submit-text.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-submit-text .mf_finder_searchBox_submit span {
    background-color: pink;
    color: black;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-submit-text"
   submit-text="test"
   ></mf-search-box>

Render result

Customize display text for option “All” of document type selection box

Use attribute doctype-all-text.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doctype-all-text .mf_finder_searchBox_doctype_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-doctype-all-text"
   doctype-all-text="All type"
   ></mf-search-box>

Render result

Customize display text for option “All Category” of category selection box

Use attribute category-all-text.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-category-all-text .mf_finder_searchBox_category_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-category-all-text"
   category-all-text="All category"
   ></mf-search-box>

Render result

Customize display text of search results sorting selection box

Use the attribute sort-text-csv.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-sort-text-csv .mf_finder_searchBox_sort_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-sort-text-csv"
   sort-text-csv="Matching,Date & time"
   ></mf-search-box>

Render result

Customize options for max number of search result display per page count

Use the attribute pagemax-csv.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-pagemax-csv .mf_finder_searchBox_pagemax_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-pagemax-csv"
   pagemax-csv="10,50,100"
   ></mf-search-box>

Render result

Customize display text of image size selection options

Use the attribute imgsize-text-csv.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-imgsize-text-csv .mf_finder_searchBox_imgsize_select {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-imgsize-text-csv"
   imgsize-text-csv="No img,Small img,Medium img,Big img"
   ></mf-search-box>

Render result

Use link instead of select box for search condition selection UI

Use attribute use-links.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-use-links .mf_finder_searchBox_links {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-use-links"
   use-links
   ></mf-search-box>

Render result

Display language setting when using link

If you use the attribute use-links for link display, you can switch the display language of the link by setting the attribute lang to the element above the custom element (could be body) or the custom element itself.

code

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   use-links
   lang="ja"
   ></mf-search-box>

Render result

Use toggle display of select box for search condition selection UI

Use attribute use-toggle.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_toggle * {
    background-color: pink;
  }
  .my-use-toggle .mf_finder_searchBox_selects .mf_finder_searchBox_misc {
    background-color: pink;
  }
  </style>

html

  <mf-search-box ajax-url="//mfx-sample.marsflag.com/x_search.x"
   class="my-use-toggle"
   use-toggle
   ></mf-search-box>

Render result

search results