> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 検索

> YiDA の Search コンポーネントの使い方を解説します。プロパティ設定とイベントバインディングにより、キーワードによるページやフォームデータの検索機能を実装する手順をご紹介します。

## 利用シーン

* ページやフォームのデータを検索する場合に使用します。

## コンポーネント例

## コンポーネントプロパティ

| 属性                   | 説明                                  | タイプ                                                                         | デフォルト                                                                                                                                    |
| -------------------- | ----------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `autoFocus`          | 自動的にフォーカスするかどうか。                    | `boolean`                                                                   | `false`                                                                                                                                  |
| `dataSource`         | 検索ボックスのドロップダウンリストの値を設定します。          | [SearchDataSource\[\]](/ja/open/yida/components/interface#searchdatasource) | `[ { "label": "Tmall", "value": "value1" }, { "label": "Taobao", "value": "value2" }, { "label": "Alibaba Group", "value": "value3" } ]` |
| `defaultFilterValue` | セレクターボタンを有効にした際のセレクターのデフォルト値を設定します。 | `string`                                                                    | `'one'`                                                                                                                                  |
| `defaultValue`       | 検索ボックスのデフォルト値。                      | `string`                                                                    | -                                                                                                                                        |
| `disabled`           | コンポーネントを無効にするかどうか。                  | `boolean`                                                                   | `false`                                                                                                                                  |
| `filter`             | セレクターのドロップダウンリストの値を設定します。           | [SearchDataSource\[\]](/ja/open/yida/components/interface#searchdatasource) | `[ { "label": "one", "value": "one" }, { "label": "two", "value": "two" }, { "label": "three", "value": "three" } ]`                     |
| `hasClear`           | クリアボタンを表示するかどうか。                    | `boolean`                                                                   | `false`                                                                                                                                  |
| `isFilter`           | セレクターを有効にするかどうか。                    | `boolean`                                                                   | `false`                                                                                                                                  |
| `onChange`           | コンポーネントの値が変更された際にトリガーされるイベント。       | `(value: string) => void`                                                   | -                                                                                                                                        |
| `onFilterChange`     | セレクターの値が変更された際にトリガーされるイベント。         | `(filterValue: string) => void`                                             | -                                                                                                                                        |
| `onSearch`           | 検索ボタンがクリックされた際にトリガーされるイベント。         | `(value: string) => void`                                                   | -                                                                                                                                        |
| `placeholder`        | 検索ボックスのデフォルトプレースホルダー。               | `string`                                                                    | `'Please enter'`                                                                                                                         |
| `searchText`         | 検索ボタンに表示するテキスト。                     | `string`                                                                    | `'Search'`                                                                                                                               |
| `shape`              | 検索ボックスの形状。                          | `'normal' \| 'simple'`                                                      | `'normal'`                                                                                                                               |
| `size`               | サイズ。                                | `'medium' \| 'large'`                                                       | `'medium'`                                                                                                                               |
| `type`               | 検索スタイルのタイプ。                         | `'normal' \| 'primary' \| 'secondary' \| 'dark'`                            | `'normal'`                                                                                                                               |