🔍
検索機能
概要
フリーワード検索機能を作成する方法について、以下のアプリを作成しながら解説します。クローン可能にしてありますので、お手持ちのワークスペースにコピーして、実際に確認してみてください。
アプリURLはこちら
目次
- テーブルを作成する
- インプットエレメントを配置し初期設定をする
- 検索インプットに条件を設定する
- インプットを空にする
１．データベースに検索対象のテーブルを準備する
まず、検索したいデータを格納するためのテーブルを用意します。このリストには、検索対象となるフィールドを適切に設定してください。
今回は、
テーブル名：メニュー
商品名：料理名
画像：URL
ホームに、カードリストを配置し、データベースを紐づけ（データベースの選択）、商品名・画像が表示されるように設定しておきます。
２．インプットエレメントを配置し初期設定をする
次に、ユーザーが検索キーワードを入力できるインプットエレメントを配置します。インプット名を「検索窓」にしてください。
このエレメントのプレイスホルダーに「検索する」と入力します。
３．検索インプットに条件を設定する
検索結果にタイトルを表示させたい場合、検索したいエレメントを選択します。ORをクリックしてください。
カスタムフィルター＞商品名＞含む＞Form Inputs＞検索窓（フォームの名称）
と設定してください。
4．インプットを空にする
次に✖アイコンを押す事でインプットの中が空になり、全表示される設定をします。
検索窓の中にアイコンを設置してください。
アイコンを選択した状態で、ClickFlowの追加＞その他＞エレメント値変更を設定してください。
検索窓＞値を空に設定してください。
これで、アイコンを押したときに値がなくなる設定が出来ました。
これらの手順を踏むことで、Click上で効果的なフリーワード検索機能を構築することができます。
最終更新日：2025/01/27