无定制化状态时

使用自定义元素mf-search-box

代码

html

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

渲染结果

通常把搜索窗口放在网站页面右上角的典型示例

代码

添加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="站内搜索"
   submit-text=""
   ></mf-search-box>

渲染结果

接收到搜索结果时，忽略数据而不反映在表单上

使用属性 ignore-search-result

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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>

渲染结果

在搜索字词输入区域中自定义占位符

使用属性 placeholder

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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="输入搜索词"
   ></mf-search-box>

渲染结果

在搜索字词输入区域中自定义title属性

使用属性 input-title

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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="把鼠标悬停在这里"
   input-title="这是索字词输入区域"
   ></mf-search-box>

渲染结果

隐藏类别选择UI

使用属性 category-hidden

代码

html

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

渲染结果

隐藏搜索结果排序顺序的选择UI

使用属性 sort-hidden

代码

html

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

渲染结果

隐藏选择每页显示最大项目数量的UI

使用属性 pagemax-hidden

代码

html

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

渲染结果

隐藏选择图像大小的UI

使用属性 imgsize-hidden

代码

html

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

渲染结果

同时隐藏用于选择类别，搜索结果排序顺序，每页显示项目数量和图像大小的UI

利用属性 options-hidden

代码

html

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

渲染结果

隐藏文档类型选择UI

利用属性 doctype-hidden

代码

html

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

渲染结果

使用属性“submit-text”自定义搜索按钮的文本

利用属性 submit-text

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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="搜索"
   ></mf-search-box>

渲染结果

为文档类型选择框中的选项”ALL”自定义显示文字

利用属性 doctype-all-text

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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="全部"
   ></mf-search-box>

渲染结果

为分类选择框中的“All ”选项自定义显示文字

利用属性 category-all-text

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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="所有类别"
   ></mf-search-box>

渲染结果

自定义搜索结果排序选择框的显示文字

使用属性 sort-text-csv

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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="最优匹配,最近更新"
   ></mf-search-box>

渲染结果

自定义每页最大显示结果数量选项值

使用属性 pagemax-csv

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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>

渲染结果

自定义图像大小选择框的显示文字

使用属性 imgsize-text-csv

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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="不显示图片,小图片,中图片,大图片"
   ></mf-search-box>

渲染结果

使用属性 use-links

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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>

渲染结果

使用链接时显示语言设置

如果使用属属性 use-links 作为链接显示， 则可以通过将属性lang设置为自定义元素的上部元素(也可以在body标签设置)
或自定义元素本身来切换链接的显示语言

代码

html

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

渲染结果

搜索条件选择UI使用选择框的切换按钮显示

使用属性 use-toggle切换。

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .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>

渲染结果

検索結果