検索結果属性

SearchResults(検索結果)属性の説明です。以下の属性は、<mf-search-results>に適用されます。

INFO

このコンポーネントを設置しないと検索結果は表示されません。

lang

Type: string
Default: ''

表示言語を指定した言語に変更することができる属性です。

html

<mf-search-results
lang="en"
></mf-search-results>

html

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

TIP

langが指定されていない要素の言語は、以下の順序で決定されます：まずその要素のlang属性 → documentのlang属性 → bodyタグのlang属性 → htmlタグのlang属性 → ブラウザの言語設定 → デフォルトは「ja」です。

優先順位：

html

1:
<mf-search-results lang="en"></mf-search-results>

2:
<div lang="ja" class="mf-wrapper"></div>

3:
<body lang="ja"></body>

4:
<html lang="en"></html>

5:
デフォルト:ja

ajax-url

Type: string
Default: ''
必須

カスタムエレメントを使用する際に指定する属性です。
検索API URLを入力していただく必要があり、MARS Platform 管理画面の「MARS FINDER > サービス一覧 > 検索 API URL」から取得できます。

html

<mf-search-results
ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search"
></mf-search-results>

重要

ajax-urlが指定されていない場合、検索結果が表示されません。使用前に必ずご確認ください。

header-hidden

Type: Boolean
Default: false

「service」の検索結果 39 件中 1 - 2 件を表示のようなヘッダ部分を非表示するかどうかを指定できる属性です。

html

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

spellcheck-hidden新

Type: Boolean
Default: false

もしかして service のことでしょうか?のようなスペルチェック部分を非表示するかどうかを指定できる属性です。

html

<mf-search-results
spellcheck-hidden
></mf-search-results>

こちらからお試しください

highlight-hidden新

Type: Boolean
Default: false

ハイライト機能(検索クエリと一致した文言をハイライトする機能)を無効にするかどうかを指定できる属性です。

html

<mf-search-results
highlight-hidden
></mf-search-results>

highlight-color新

Type: String
Default: #ffff0050 こちらの背景

ハイライトの色を指定できる属性です。

html

<mf-search-results
highlight-color="#8000ff43"
></mf-search-results>

no-highlight-animation新

Type: Boolean
Default: false

ハイライトアニメーションを使うかどうかを指定できる属性です。

html

<mf-search-results
no-highlight-animation
></mf-search-results>

link-target

Type: String
Default: 'auto'

検索結果リンクを開く際のターゲットを指定できる属性です。
self: 検索結果をクリックすると同一ウィンドウ内で画面遷移します。
auto: 検索結果ページと同一ドメインの場合は、検索結果をクリックすると同一ウィンドウ内で画面遷移します。

html

<mf-search-results
link-target="self"
></mf-search-results>

INFO

この属性を設定しない場合は、どの検索結果をクリックしても別タブで開く仕様になっています。

html

<mf-search-results
link-target="auto"
></mf-search-results>

use-text-fragment 新

Type: Boolean
Default: false

検索結果のリンクをクリックした際に、検索結果の該当箇所をハイライト表示するかどうかを指定できる属性です。テキストフラグメントについて詳しくはこちら

html

<mf-search-results
use-text-fragment
></mf-search-results>

use-infinite-scroll 新 β版

Type: Boolean
Default: false

無限スクロールコンポーネントを使うかどうかを指定できる属性です。この場合は、ページネーションコンポーネントは表示されません。
use-infinite-scrollを利用する場合は、他のページネーションの属性(pagination-maxなど)は使用できません。

html

<mf-search-results
use-infinite-scroll
></mf-search-results>

こちらからお試しください

注意

無限スクロールを使用する場合、検索結果コンポーネントと同ページにあるコンテンツが、全ての検索結果が表示されるまで表示されない可能性があります。
関連キーワードが上記例に該当しますので、use-related-keywordsの代わりに関連キーワードコンポーネントの使用をおすすめします。

use-infinite-scroll-go-top 新

Type: Boolean
Default: false

スクロールすると、上に戻るボタンが表示されるようになります。

html

<mf-search-results
use-infinite-scroll
use-infinite-scroll-go-top
></mf-search-results>

こちらからお試しください

Type: Boolean
Default: false

関連キーワードコンポーネントを使うかどうかを指定できる属性です。

html

<mf-search-results
use-related-keywords
></mf-search-results>

関連キーワードをクリックすると、その関連キーワードが現在の検索クエリに追加されて検索が再実行されます。

Type: String
Default: '関連キーワード'　(言語によって変わります)

use-related-keywordsを使用する場合、関連キーワードコンポーネントのヘッダータイトルを指定できる属性です。

html

<mf-search-results 
use-related-keywords
related-keywords-header-text="マッチしたキーワード"
></mf-search-results>

pagination-max

Type: Number
Default: 5
Min: 3

ページネーションに表示するページ番号の最大合計個数を指定できる属性です。

html

<mf-search-results
pagination-max="2"
></mf-search-results>

html

<mf-search-results
pagination-max="10"
></mf-search-results>

TIP

ページネーションを少し進めないと、全てのページネーションが表示されません。

pagination-hidden

Type: Boolean
Default: false

ページネーションコンポーネントを使うかどうかを指定できる属性です。

html

<mf-search-results
pagination-hidden
></mf-search-results>

no-result-text新

Type: String
Default: '検索結果が見つかりません'　(言語によって変わります)

検索結果がない場合、全てのコンポーネントの代わりに表示されるテキストを指定できる属性です。

html

<mf-search-results 
no-result-text="結果がありませんでした。 他のキーワードをお試しください。"
></mf-search-results>

こちらからお試しください

use-role-main 新

Type: Boolean
Default: false
アクセシビリティ

role="main"属性を使用するかどうかを指定できる属性です。

TIP

role="main"は、ページのメインコンテンツを示すための属性です。スクリーンリーダーなどの支援技術を使用しているユーザーにとって、ページのメインコンテンツを特定するのに役立ちます。
詳細はこちら

注意

role="main"属性は、ページ内に一つだけ使用することが推奨されているので、他のコンポーネントには使用しないでください。

html

<mf-search-results
use-role-main
></mf-search-results>

こちらからお試しください

result-callback

Type: String
Default: ''

結果受信後のコールバック関数名を指定できる属性です。

html

<mf-search-box
result-callback="myResultCallbackName"
></mf-search-box>

関数の定義は<script></script>の中などに定義していきます。

html

<script>
  const myResultCallbackName = () => {
    alert('myResultCallbackName');
  }
</script>

上記例は、検索実行時にalertが出るものになります。

こちらからお試しください

ignore-url-change新

Type: Boolean
Default: false

初期ロード以外のURL(hash,#)の変更を無視するかどうかを指定できる属性です。検索結果が一回ロードされた後に、どんな検索が行っても(URL変更が変更されても)検索結果が変わりません。

html

<mf-search-box
ignore-url-change
></mf-search-box>

こちらからお試しください

TIP

ページの「hash,#」は変えたいが検索結果が変わって欲しくない場合での利用を想定しています。

注意

「hash,#」以外の変更があったらページが変わるので、ignore-url-changeは効かなくなります。
ご注意ください。

outbound-doc-class

Type: String
Default: ''

検索結果が別ドメインの場合に .mf_finder_organic_docに設定されるクラスを変更することができます。

html

<mf-featured-contents
outbound-doc-class="mf_finder_organic_doc"
></mf-featured-contents>

検索結果属性 ​

lang ​

ajax-url ​

header-hidden ​

spellcheck-hidden新 ​

highlight-hidden新 ​

highlight-color新 ​

no-highlight-animation新 ​

link-target ​

use-text-fragment 新 ​

use-infinite-scroll 新 β版 ​

use-infinite-scroll-go-top 新 ​

use-related-keywords ​

related-keywords-header-text新 ​

pagination-max ​

pagination-hidden ​

no-result-text新 ​

use-role-main 新 ​

result-callback ​

ignore-url-change新 ​

outbound-doc-class ​

検索結果属性

lang

ajax-url

header-hidden

spellcheck-hidden新

highlight-hidden新

highlight-color新

no-highlight-animation新

link-target

use-text-fragment 新

use-infinite-scroll 新 β版

use-infinite-scroll-go-top 新

use-related-keywords

related-keywords-header-text新

pagination-max

pagination-hidden

no-result-text新

use-role-main 新

result-callback

ignore-url-change新

outbound-doc-class