SSearchField <s-search-field>

検索クエリ用のテキスト入力。 SSearchField は、Shopify Polaris の <s-search-field> web component 向けの型付き Vue 3 wrapper です。

import { SSearchField } from 'polaris-vue-elements'

ベストプラクティス

• その場での絞り込みに使う。 特定のセクションやリストの内容を絞り込むのに適しています。グローバルナビゲーションや、複雑で複数ステップにわたる検索には、より本格的な検索パターンが必要です。
• 何を検索するのかを示す。 検索対象のコンテンツと、検索に使える属性をマーチャントに伝える、具体的な label と placeholder を書きます。
• 入力に合わせて応答する。 可能であれば、マーチャントの入力中に結果や絞り込まれたコンテンツを更新し、検索語を調整しながら、検索が機能していると確信できるようにします。
• クリアされた検索と結果のない検索に備える。 フィールドがクリアされたら、リスト全体を元に戻します。一致するものがない場合は、別のアクションやより広い検索を提案するメッセージを表示します。
• 十分な入力を待つ。 結果が多すぎたり意味のない結果になったりする検索は避けます。2〜3 文字入力されてから開始すれば、役立つ一致結果を返すのに十分です。

<SSearchField label="Search products" placeholder="Search by title, SKU or vendor" />

詳しいガイダンスについては、<s-search-field> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Value: (empty)

<script setup>
import { ref } from 'vue'
import { SSearchField } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSearchField label="Search products" placeholder="Search" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

<SSearchField> の v-model は value プロパティにバインドされ、input DOM イベントを監視します。

<SSearchField v-model="value" />

これは次と同等です：

<SSearchField :value="value" @input="value = $event.target.value" />

Props

Prop	型	説明
autocomplete	"language" | "organization" | "name" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" … (84 more)	フィールドに入力される内容のヒントです。on（デフォルト）に設定すると、フィールドがオートフィルをサポートすべきであることを示しますが、想定される内容についてそれ以上の意味的な情報はありません。off に設定すると、このフィールドに機密情報、またはワンタイムコードのように保存されることのない内容が含まれることを示します。あるいは、オートフィル時にこのフィールドに入力してほしい具体的なデータを表す値を指定することもできます。
defaultValue	string	フィールドのデフォルト値です。
details	any	フィールドのコンテキストやガイダンスを提供する追加のテキストです。このテキストはフィールドとそのラベルとともに表示され、ユーザーに詳しい情報や手順を伝えます。スクリーンリーダーのユーザーにも公開されます。
disabled	boolean	フィールドを無効にし、あらゆる操作を受け付けないようにします。
error	any	ユーザーにエラーを示します。すぐに解決する必要がある問題を伝えるため、フィールドに特定のスタイルが適用されます。
id	string	要素の一意な識別子です。
label	any	フィールドのラベルとして使用するコンテンツです。
labelAccessibilityVisibility	"visible" | "exclusive"	コンポーネントのラベルの表示状態を変更します。 - visible: ラベルはすべてのユーザーに表示されます。 - exclusive: ラベルは視覚的に非表示になりますが、アクセシビリティツリーには残ります。
maxLength	number	入力できる最大文字数を指定します。
minLength	number	入力できる最小文字数を指定します。
name	string	最も近い親のフォーム内で一意となる、フィールドの識別子です。
placeholder	string	フィールドに期待される値を説明する短いヒントです。
readOnly	boolean	ユーザーはフィールドを編集できません。フォーカスは可能で、スクリーンリーダーによって読み上げられます。
required	boolean	フィールドに値が必要かどうか。この要件はフィールドにセマンティックな意味を加えますが、エラーが自動的に表示されるわけではありません。このフィールドが空のときにエラーを表示したい場合は、error プロパティを使用してください。
value	string	フィールドの現在の値です。省略した場合、フィールドは空になります。

上記の一部の型の列は読みやすさのために省略されています。完全な union はライブラリが生成する TypeScript の型（src/lib/generated/types.ts）で確認できます。

Events

Event	型
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

これらのイベントは <SSearchField> 上で @blur 形式のリスナーで受け取れます。

Slots

Slot	説明
details
error