State without customization

Use custom element mf-search-results.

code

html

  <mf-search-results></mf-search-results>

Render result

Setting display language

Set the attribute "lang" to the upper element of the custom element (which may be the body) or the custom element itself.

code

Add css

  <style>
  /* disable this setting of the fourth and subsequent results of search results (unnecessary for actual code) */
  .my-lang .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   class="my-lang"
   lang="ja"
   ></mf-search-results>

Render result

Change the maximum number of page number items displaying on the pager to 5

Specify by attribute ":pager-item-count"

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-pager-item-count .mf_finder_pager_item_before_pages,
  .my-pager-item-count .mf_finder_pager_item_before_pages *,
  .my-pager-item-count .mf_finder_pager_item_current,
  .my-pager-item-count .mf_finder_pager_item_after_pages,
  .my-pager-item-count .mf_finder_pager_item_after_pages * {
    background-color: pink;
  }
  /* limit search results for sample (unnecessary for actual code) */
  .my-pager-item-count .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   class="my-pager-item-count"
   :pager-item-count=5
   ></mf-search-results>

Render result

Hide the header of search results

To be specified by attribute "hide-header".

code

Add css

  <style>
  /* limit search results for sample (unnecessary for actual code) */
  .my-hide-header .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   hide-header
   ></mf-search-results>

Render result

Hide pagers under search results

To be specified by attribute "hide-pager".

code

Add css

  <style>
  /* disable this setting of the fourth and subsequent results of search results (unnecessary for actual code) */
  .my-hide-pager .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   hide-pager
   ></mf-search-results>

Render result

Display related search words element under search results

To be specified by the attribute "use-related-keywords".

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-use-related-keywords .mf_finder_relatedkeywords {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-use-related-keywords .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   class="my-use-related-keywords"
   use-related-keywords
   ></mf-search-results>

Render result

Transit to search result page in the same window

Use attribute "target-self".

code

Add css

  <style>
  /* limits search results for sample (unnecessary for actual code) */
  .my-target-self .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
    target-self
  ></mf-search-results>

Render result

Customize the header part with CSS

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-header-css .mf_finder_organic_header_wrapper {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-header-css .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_query:before {
    content:" for \"";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_query:after {
    content:"\"";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_total:before {
    content:" of ";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_total:after {
    content:"";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_from:before {
    content:"";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_from:after {
    content:" - ";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_to:before {
    content:"";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_to:after {
    content:", ";
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_header {
    display: flex;
  }
  .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_header .mf_finder_organic_nums {
    display: flex;
  }
  </style>

html

  <mf-search-results
   class="my-header-css"
   ></mf-search-results>

Render result

Customize the contents of the header of search results

Customize template with slot header.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-header-slot .mf_finder_organic_header_wrapper {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-header-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  .my-header-slot .mf_finder_organic_header_wrapper span {
    font-weight: bold;
  }
  </style>

html

  <mf-search-results class="my-header-slot">
    <template slot="header" scope="x">
      <div class="my-header">
        <div>
          For results searched by “<span>{{x.params.q}}</span>”, maximam <span>{{x.params.pagemax}}</span> pages is displayed per page,
        </div>
        <div>
          Current page number <span>{{x.params.page}}</span> is displaying result
          from number (<span>{{x.organic.range[0]}}</span> to number <span>{{x.organic.range[1]}}</span>)
        </div>
      </div>
    </template>
  </mf-search-results>

Render result

Customize the document list display of search results

Customize template with slot docs.

code

Add css

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

html

  <mf-search-results class="my-docs-slot">
    <template slot="docs" scope="x">
      <div class="my_finder_organic_docs">Page title list
        <ul>
          <li v-for="(doc,i) in x.docs">
            <a :href="doc.uri"
             @click.stop.prevent
             @mousedown.left="x.self.preClickDoc(doc,$event)"
             @mouseup.left="x.self.chkClickDoc(doc,$event)"
            >{{doc.title}}</a>
          </li>
        </ul>
      </div>
    </template>
  </mf-search-results>

Render result

Customizing the search results for each document

Customize templates with slot doc.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc-slot .my_finder_organic_doc {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc-slot">
    <template slot="doc" scope="x">
      <div class="my_finder_organic_doc">
          <a :href="x.doc.uri"
           @click.stop.prevent
           @mousedown.left="x.self.preClickDoc(x.doc,$event)"
           @mouseup.left="x.self.chkClickDoc(x.doc,$event)"
          >{{x.doc.title}}</a>
      </div>
    </template>
  </mf-search-results>

Render result

Customize image display area for each document

Customize the template with slot doc_image.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_image-slot .my_finder_organic_doc_img {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_image-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_image-slot">
    <template slot="doc_image" scope="x">
      <div class="my_finder_organic_doc_img">
        <div>{{x.doc.uri.replace(/.*\/([^$])/,'$1')}}</div>
        <img alt="custom image"
          :src="x.self.imageUrls[x.i][0]"
          @error="x.self.imageError(x.self.imageUrls[x.i],$event)"
          @mouseover="x.self.showResultframe(x.doc,$event,true)"
          >
      </div>
    </template>
  </mf-search-results>

Render result

Add content to the top of the information for each document

Customize template with slot doc_head.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_head-slot .my_finder_organic_doc_head {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_head-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_head-slot">
    <template slot="doc_head" scope="x">
        <div class="my_finder_organic_doc_head">Header part{{x.i+1}}</div>
    </template>
  </mf-search-results>

Render result

Add content before title of each document

Customize the template with slot doc_title_prev.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_title_prev-slot .my_finder_organic_doc_title_prev {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_title_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_title_prev-slot">
    <template slot="doc_title_prev" scope="x">
        <span class="my_finder_organic_doc_title_prev">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

Render result

Add content after title of each document

Customize the template with slot doc_title_post.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_title_post-slot .my_finder_organic_doc_title_post {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_title_post-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_title_post-slot">
    <template slot="doc_title_post" scope="x">
        <span class="my_finder_organic_doc_title_post">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

Render result

Add content before descriptive text for each document

Customize the template with slot doc_body_prev.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_body_prev-slot .my_finder_organic_doc_body_prev {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_body_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_body_prev-slot">
    <template slot="doc_body_prev" scope="x">
      <div class="my_finder_organic_doc_body_prev">◆Description starts here{{x.i+1}}◆</div>
    </template>
  </mf-search-results>

Render result

Add content after description of each document

Customize templates with slot doc_body_post.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_body_post-slot .my_finder_organic_doc_body_post {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_body_post-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_body_post-slot">
    <template slot="doc_body_post" scope="x">
      <div class="my_finder_organic_doc_body_post">◆Description ends here{{x.i+1}}◆</div>
    </template>
  </mf-search-results>

Render result

Add content before URL of each document

Customize template with slot doc_url_prev.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_url_prev-slot .my_finder_organic_doc_url_prev {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_url_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_url_prev-slot">
    <template slot="doc_url_prev" scope="x">
        <span class="my_finder_organic_doc_url_prev">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

Render result

Add content after URL for each document

Customize the template with slot doc_url_post.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_url_post-slot .my_finder_organic_doc_url_post {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_url_post-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_url_post-slot">
    <template slot="doc_url_post" scope="x">
        <span class="my_finder_organic_doc_url_post">◆{{x.i+1}}◆</span>
    </template>
  </mf-search-results>

Render result

Add content to the bottom of the information for each document

Customize template with slot doc_foot.

code

Add css

  <style>
  /* Set bg color to pink for better understanding, unnecessary for actual code */
  .my-doc_foot-slot .my_finder_organic_doc_foot {
    background-color: pink;
  }
  /* limits search results for sample (unnecessary for actual code) */
  .my-doc_foot-slot .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results class="my-doc_foot-slot">
    <template slot="doc_foot" scope="x">
        <div class="my_finder_organic_doc_foot">Footer part{{x.i+1}}</div>
    </template>
  </mf-search-results>

Render result