検索窓属性

SearchBox(検索窓)属性の説明です。以下の属性は、<mf-search-box>に適用されます。

lang

Type: string
Default: ''

表示言語を指定した言語に変更することができる属性です。
指定可能な言語一覧はこちらからご確認いただけます。

html

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

html

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

TIP

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

優先順位：

html

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

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

重要

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

重要

検索結果を別のページで表示する場合には、SearchResults にもajax-urlを付ける必要があります。

html

<mf-search-results
ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/f2ba46aa/search"
></mf-search-results>

results-page-url

Type: string
Default: ''

違うページで検索結果を表示したい場合に使用する属性です。
検索結果ページのURLを指定できる属性です。ない場合は検索結果ページに遷移しないで、同じページ内で検索結果を表示します。（その場合は、mf-search-resultsコンポーネントが必要です。)

html

<mf-search-box
results-page-url="/my-results-page"
></mf-search-box>

注意

URLの後にハッシュ(#)など、何も付けないようにしてください。
カスタムエレメントv1では/my-results-page#/でしたが、カスタムエレメントv2(本バージョン)では/my-results-pageとなります。

INFO

GALFSRAM設定からrouter_modeを変更した場合、results-page-urlも変更する必要があります。

!(function () {
  var G = (GALFSRAM = window.GALFSRAM || {})
  G.mfx.router_mode = 'history'
})()

input-placeholder

Type: string
Default: '検索' (言語によって変わります)
アクセシビリティ

検索語入力フィールド(input)の「placeholder」を指定できる属性です。

html

<mf-search-box
input-placeholder="検索してみる"
></mf-search-box>

input-title 新

Type: string
Default: '検索キーワード入力' (言語によって変わります)
アクセシビリティ

検索語入力フィールド(input)の「title」を指定できる属性です。

html

<mf-search-box
input-title="検索語入力フィールド"
></mf-search-box>

検索入力フィールドにマウスオーバーすると、指定した語句が表示されます。

submit-btn-text

Type: string
Default: '検索' (言語によって変わります)

送信ボタンのテキストを指定できる属性です。

html

<mf-search-box
submit-btn-text="検索してみる"
></mf-search-box>

submit-btn-title 新

Type: string
Default: '検索' (言語によって変わります)
アクセシビリティ

送信ボタンの「title」を指定できる属性です。

html

<mf-search-box
submit-btn-title="検索ボタン"
></mf-search-box>

送信ボタンにマウスオーバーすると、指定した語句が表示されます。

submit-btn-hidden 新

Type: Boolean
Default: false

送信ボタンを非表示にするかどうかを指定できる属性です。Enterキーのみで検索行います。

html

<mf-search-box
submit-btn-hidden
></mf-search-box>

use-alt-submit-btn 新

Type: Boolean
Default: false

検索窓右側にある代替送信ボタン(虫眼鏡のアイコン)の使用を指定できる属性です。
このボタンの挙動はデフォルトの送信ボタンと同様です。

html

<mf-search-box
use-alt-submit-btn
></mf-search-box>

suggest-max

Type: Number
Default: 10
Max: 15
Min: 2

サジェストの表示件数を指定できる属性です。

html

<mf-search-box
suggest-max="3"
></mf-search-box>

以下検索窓に文字を入力すると、サジェストの表示が最大3件までになります。

suggest-hidden

Type: Boolean
Default: false

サジェストを非表示にするかどうかを指定できる属性です。

html

<mf-search-box
suggest-hidden
></mf-search-box>

use-append-to-input 新

Type: Boolean
Default: false

サジェストの右にある、押すと検索窓に文字が追加される矢印ボタンを使用するかどうかを指定できる属性です。

html

<mf-search-box
use-append-to-input
></mf-search-box>

use-clear-input-btn

Type: Boolean
Default: false

検索キーワードをクリアするためのボタンを使用するかどうかを指定できる属性です。

html

<mf-search-box
use-clear-input-btn
></mf-search-box>

search-history-hidden

Type: Boolean
Default: false

検索履歴を非表示にするかどうかを指定できる属性です。
検索履歴はページごとに、ローカルストレージに保存されます。

INFO

検索履歴機能はデータをクラウドに送信しません。ローカルのブラウザストレージのみを使用します。あなたのデータはあなたのコンピュータに残ります。

html

<mf-search-box
search-history-hidden
></mf-search-box>

search-history-max

Type: Number
Default: 5
Max: 10

検索履歴の表示件数を指定できる属性です。

html

<mf-search-box
search-history-max="3"
></mf-search-box>

以下検索窓に文字を入力すると、検索履歴の表示が最大3件までになります。

suppress-search 新 β版

Type: Boolean
Default: false

suppress-searchは、サジェスト又は検索履歴の候補でクリックやエンターキーを押しても、検索を行なわないようにする属性です。

html

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

search-on-load

Type: Boolean
Default: false

ページロード時に検索を実行するかどうかを指定できる属性です。
属性を指定するとユーザーが検索結果ページを開いた時に結果が表示されるようになります。

html

<mf-search-box
search-on-load
ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/f2ba46aa/search"
results-page-url="/my-results-page"
></mf-search-box>

以下検索結果ページを開くと検索が自動的に行われ、検索結果が表示された状態になります。

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

TIP

search-keywordを指定しない場合、空文字列で検索します。

search-keyword 新

Type: String
Default: ''

初期検索クエリを指定できる属性です。
search-on-load が有効の場合、この値が検索クエリとして使用されます。

html

<mf-search-box
search-keyword="services"
search-on-load
ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/f2ba46aa/search"
results-page-url="/my-results-page"
></mf-search-box>

以下検索結果ページを開くと、クエリ「services」で検索が自動的に行われ、検索結果が表示された状態になります。
こちらからお試しください

target-blank

Type: Boolean
Default: false

results-page-url を指定する場合に、検索結果を新しいタブで開くかどうかを指定できる属性です。設定しない場合はデフォルトで同じタブで結果ページを開きます。

html

<mf-search-box
target-blank
results-page-url="/pages/results-page"
></mf-search-box>

以下では、検索すると新しいタブで検索結果が表示されます。

use-realtime-results 新 β版

Type: Boolean
Default: false

リアルタイム検索結果を、サジェストの代わりに表示するかどうかを指定できる属性です。ユーザーは検索結果を直感的により素早く確認することができ、ユーザー体験をより豊かなものにします。

html

<mf-search-box
use-realtime-results
></mf-search-box>

以下で検索してみてください

TIP

上と下の矢印キーで検索結果を移動することができます。移動しないまま、Enterキーを押すと、その検索結果ページに遷移します。

注意

検索窓の幅が狭すぎると、検索結果のレイアウトが崩れてしまい、結果がきれいに表示されなくなるのでご注意ください。

use-realtime-resultsと検索結果コンポーネントを同時に使用すると、検索結果が重複して表示されてしまうので、useRealtimeResultsを使用する場合は、検索結果コンポーネントを使用しないようにしてください。

url-link-target 新

Type: String
Default: 'auto'

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

別のタブで開く:

html

<mf-search-box
use-realtime-results
url-link-target="auto"
></mf-search-box>

同じウィンドウで開く:

html

<mf-search-box
use-realtime-results
url-link-target="self"
></mf-search-box>

別のタブで開く:

同じウィンドウで開く:

doctype-all-text

Type: String
Default: 'すべて' (言語によって変わります)

文書種別絞り込みのラベル(すべて)を指定できる属性です。

html

<mf-search-box
doctype-all-text="全てのドキュメント"
></mf-search-box>

doctype-csv

Type: String
Default: 'html,pdf,doc,xls,ppt'

サーバーが文書種別リストを返さない場合のフォールバックを指定できる属性です。

html

<mf-search-box
doctype-csv="html,pdf"
></mf-search-box>

force-doctype-csv

Type: String
Default: 'html,pdf'

文書種別リストを上書きする属性です。
サーバーが返す文書種別リストよりも優先されます。

html

<mf-search-box
force-doctype-csv="html,pdf"
></mf-search-box>

doctype-default

Type: String
Default: 'すべて' (言語によって変わります)

文書種別リストのデフォルトタイプを指定できる属性です。サーバーが返す文書種別リストに含まれているタイプを指定する必要があります。
また、force-doctype-csvやdoctype-csvで文書種別リストを上書きする場合も同様に、 上書きした文書種別リストに含まれているタイプを指定する必要があります。 そうでない場合、文書種別リストのデフォルトタイプは空白になります。

html

<mf-search-box
doctype-default="pdf"
></mf-search-box>

注意

サーバーが返す文書種別リストに含まれていないタイプを指定した際は下記のようになります。

html

<mf-search-box
doctype-default="css"
></mf-search-box>

doctype-hidden

Type: Boolean
Default: false

文書種別の絞り込みを非表示にするかどうかを指定できる属性です。

html

<mf-search-box
doctype-hidden
></mf-search-box>

INFO

category系のオプションは、一回検索しないと表示されないので、それぞれのリンクからお試しください。

category-csv

Type: String
Default: ''

サーバーがカテゴリリストを返さない場合のフォールバックを指定できる属性です。

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

force-category-csv

Type: String
Default: ''

カテゴリリストを上書きする属性です。
サーバーが返すカテゴリリストよりも優先されます。

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

category-default

Type: String
Default: ''

カテゴリリストのデフォルトタイプを指定できる属性です。この際、サーバーが返すカテゴリリストに含まれているタイプを指定する必要があります。

注意

force-category-csvやcategory-csvでカテゴリを上書きする場合も同様に、 上書きしたカテゴリリストに含まれているタイプを指定する必要があります。 そうでない場合、カテゴリリストのデフォルトタイプは空白になります。
また、検索結果がうまく表示されませんので、ご注意ください。

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

category-all-text

Type: String
Default: 'All Category'

カテゴリ絞り込み用セレクトボックスのラベル(All Category)を指定できる属性です。

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

category-hidden

Type: Boolean
Default: false

カテゴリ絞り込み用セレクトボックスを非表示にするかどうかを指定できる属性です。

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

sort-default

Type: Number
Default: 0

デフォルトの並び順を指定できる属性です。0がマッチ順、1が新着順です。

html

<mf-search-box
sort-default="1"
></mf-search-box>

注意

sort-defaultでは、0 と 1 以外の数字を設定すると、デフォルトの値が空になります。

html

<mf-search-box
sort-default="10"
></mf-search-box>

sort-text-csv

Type: String
Default: 'マッチ順,新着順' (言語によって変わります)

並び順選択用セレクトボックスに表示するテキストをCSV形式で指定できる属性です。

html

<mf-search-box
sort-text-csv="関連性順,最新順"
></mf-search-box>

注意

sort-text-csvでテキストを指定する場合、0がマッチ順、1が新着順なのでそれぞれに対応するように必ず2つ指定してください。
2つ指定しないとセレクトボックスのテキストが空になります。

sort-hidden

Type: Boolean
Default: false

並び順選択用セレクトボックスを非表示にするかどうかを指定できる属性です。

html

<mf-search-box
sort-hidden
></mf-search-box>

pagemax-csv

Type: Number
Default: 10

ページ毎の検索結果表示件数(デフォルトの値)を指定できる属性です。

html

<mf-search-box
pagemax-default="30"
pagemax-csv="15,30,45"
></mf-search-box>

注意

10,20,30以外の値を指定する場合は、pagemaxCsvでその値を含める必要があります。
そうでない場合、デフォルトの値が空になります。

html

<mf-search-box
pagemax-default="50"
></mf-search-box>

pagemax-default

Type: String
Default: '10,20,30'

検索結果表示件数選択用セレクトボックスに表示する値をCSV形式で指定できる属性です。

html

<mf-search-box
pagemax-csv="15,30,45"
pagemax-default="30"
></mf-search-box>

注意

pagemax-defaultで指定した値を含める必要があります。
そうでない場合、pagemax-defaultは10なのでデフォルトの値が空になります。

html

<mf-search-box
pagemax-csv="15,30,45"
></mf-search-box>

pagemax-hidden

Type: Boolean
Default: false

ページ毎の検索結果表示件数を非表示にするかどうかを指定できる属性です。

html

<mf-search-box
pagemax-hidden
></mf-search-box>

imgsize-default

Type: Number
Default: 2

デフォルトの画像サイズを指定できる属性です。0 がなし、1 が小(175px)、2 が中(200px)、3 が大(225px)です。

html

<mf-search-box
imgsize-default="2"
></mf-search-box>

注意

imgsize-defaultでは、0, 1, 2, 3 以外の数字を設定すると、デフォルトの値が空になります。imgsize-text-csvを設定されている場合は、そちらの順番に影響されます。

html

<mf-search-box
imgsize-default="10"
></mf-search-box>

imgsize-text-csv

Type: String
Default: 'なし,小,中,大' (言語によって変わります)

画像サイズ選択用セレクトボックスに表示する値をCSV形式で指定できる属性です。

html

<mf-search-box
imgsize-text-csv="なし,小さめ,中くらい,大きめ"
></mf-search-box>

WARNING

テキストCSVには、数と順番が固定された4つの値を必ず含めてください。

注意

Default: 'なし,小,中,大'に対応するように4つ設定する必要があります。
必ず4つ設定してください。

html

<mf-search-box
imgsize-text-csv="なし,小さめ,中くらい"
></mf-search-box>

imgsize-hidden

Type: Boolean
Default: false

画像サイズ選択用セレクトボックスを非表示にするかどうかを指定できる属性です。

html

<mf-search-box
imgsize-hidden
></mf-search-box>

options-hidden

Type: Boolean
Default: false

検索条件選択セレクトボックス（カテゴリ、並び順、ページ毎の表示件数、画像サイズ）を非表示にするかどうかを指定できる属性です。

html

<mf-search-box
options-hidden
></mf-search-box>

use-links

Type: Boolean
Default: false

検索条件の選択形式（カテゴリ、並び順、ページ毎の表示件数、画像サイズ）をセレクトボックスから択一式ボタンとして表示するかどうかを指定できる属性です。

html

<mf-search-box
use-links
></mf-search-box>

use-links-category-text 新

Type: String
Default: 'カテゴリー' (言語によって変わります)

use-linksが有効な場合、カテゴリのタイトルテキストを指定できる属性です。

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

use-links-sort-text 新

Type: String
Default: '並び替え'

use-linksが有効な場合、並び順のタイトルテキストを指定できる属性です。

html

<mf-search-box
use-links
use-links-sort-text="並び順変更ボタン"
></mf-search-box>

use-links-pagemax-text 新

Type: String
Default: '最大表示件数'

use-linksが有効な場合、ページ毎の表示件数タイトルテキストを指定できる属性です。

html

<mf-search-box
use-links
use-links-pagemax-text="ページ毎の表示件数"
></mf-search-box>

use-links-imgsize-text 新

Type: String
Default: '画像サイズ'

use-linksが有効な場合、画像サイズのタイトルテキストを指定できる属性です。

html

<mf-search-box
use-links
use-links-imgsize-text="イメージサイズ"
></mf-search-box>

ignore-search-result

Type: Boolean
Default: false

検索結果受信時にデータをフォームへ反映させず無視するかどうかを指定できる属性です。

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

submit-callback

Type: String
Default: ''

検索時（Enter押下時や送信ボタン押下時）のコールバック関数名を指定できる属性です。JavaScriptで定義した独自関数を呼び出すことができます。

html

<mf-search-box
submit-callback="mySubmitCallbackName"
></mf-search-box>

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

html

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

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

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

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が出るものになります。

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

注意

resultCallbackを使用したい場合、同じページ内に検索窓(SearchBox)と一緒に検索結果(SearchResults)を配置する必要があります。

検索窓属性 ​

lang ​

ajax-url ​

results-page-url ​

input-placeholder ​

input-title 新 ​

submit-btn-text ​

submit-btn-title 新 ​

submit-btn-hidden 新 ​

use-alt-submit-btn 新 ​

suggest-max ​

suggest-hidden ​

use-append-to-input 新 ​

use-clear-input-btn ​

search-history-hidden ​

search-history-max ​

suppress-search 新 β版 ​

search-on-load ​

search-keyword 新 ​

target-blank ​

use-realtime-results 新 β版 ​

url-link-target 新 ​

doctype-all-text ​

doctype-csv ​

force-doctype-csv ​

doctype-default ​

doctype-hidden ​

category-csv ​

force-category-csv ​

category-default ​

category-all-text ​

category-hidden ​

sort-default ​

sort-text-csv ​

sort-hidden ​

pagemax-csv ​

pagemax-default ​

pagemax-hidden ​

imgsize-default ​

imgsize-text-csv ​

imgsize-hidden ​

options-hidden ​

use-links ​

use-links-category-text 新 ​

use-links-sort-text 新 ​

use-links-pagemax-text 新 ​

use-links-imgsize-text 新 ​

ignore-search-result ​

submit-callback ​

result-callback ​

検索窓属性

lang

ajax-url

results-page-url

input-placeholder

input-title 新

submit-btn-text

submit-btn-title 新

submit-btn-hidden 新

use-alt-submit-btn 新

suggest-max

suggest-hidden

use-append-to-input 新

use-clear-input-btn

search-history-hidden

search-history-max

suppress-search 新 β版

search-on-load

search-keyword 新

target-blank

use-realtime-results 新 β版

url-link-target 新

doctype-all-text

doctype-csv

force-doctype-csv

doctype-default

doctype-hidden

category-csv

force-category-csv

category-default

category-all-text

category-hidden

sort-default

sort-text-csv

sort-hidden

pagemax-csv

pagemax-default

pagemax-hidden

imgsize-default

imgsize-text-csv

imgsize-hidden

options-hidden

use-links

use-links-category-text 新

use-links-sort-text 新

use-links-pagemax-text 新

use-links-imgsize-text 新

ignore-search-result

submit-callback

result-callback