# Listviewのフィルターで、部分一致したデータを表示させる方法

**URL:** <https://www.nocode-faq.com/t/topic/4411>\
**Category:** flutterflow\
**Created:** [2024 年 10 月 29 日午後 3:11 UTC](https://www.nocode-faq.com/t/topic/4411 "2024-10-29T15:11:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![digi](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@digi](https://www.nocode-faq.com/u/digi)\
**Post date:** [2024 年 10 月 29 日午後 3:11 UTC](https://www.nocode-faq.com/t/topic/4411/1 "2024-10-29T15:11:10Z")

</div>

いつもお世話になっております。  
Listviewのfilterを、部分一致で表示させる方法について質問させていただきます。  
行いたい動作は、componentのwidget stateに入力した内容が、部分的に該当するものをListviewに表示させる という動作です。

Listviewのクエリ設定は画像の通りです。検索ボタンにはbottomsheetのアクションを設定し、「test\_search」componentを開くようにしています。  
コンポーネントにあるボタンを押下すると、メインページへ移動しtextfieldの値をparameterとして受け渡す設定にしました。

現状の設定では、filterの設定が「Query document」 Equal to 「page parameter」としているため、値が完全に一致する場合のみListviewの値が表示されるようになってしまいます。部分一致するものを表示させる方法があればご教示いただきたく存じます。  
(例：Listview内のドキュメントは「text1」「text2」「text10」のため、検索ワードを「text1」とした場合、「text1」と「text10」が表示されるようにしたいです。)

 ![スクリーンショット 2024-10-29 233725](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f08d3584fe1eb7d25446294af710e2f497fa84b8.png)  
 ![スクリーンショット 2024-10-29 235558](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/cb2cb58deb2684d973387e6a68504488d91ffd5d.png)  
 ![スクリーンショット 2024-10-29 233843](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/90bee392f08d6514cd3f8b2f626035ca7730e25c.png)  
 ![スクリーンショット 2024-10-29 233833](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/b1f7a03101141b59272824a6705d087331a28414.png)

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 10 月 30 日午後 12:09 UTC](https://www.nocode-faq.com/t/topic/4411/2 "2024-10-30T12:09:03Z")

</div>

基本的に、Firebaseは、部分一致に対応してないはずで、  
対応方法は、以下の3つのどれかだと思います。

## **案1 Algoliaを使ったサードパーティ検索エンジンの導入**

Algoliaは、高速で精度の高い検索エンジンで、FirestoreやSupabaseといったデータベースと簡単に連携できる機能を提供しています。Firestoreで部分一致検索が難しい場合、Algoliaを使うことでリアルタイム検索を実現できます。

FlutterFlowのアクション設定で、Algolia APIを呼び出し、部分一致検索を行うように設定します。Algoliaはデフォルトで部分一致検索に対応してます。

## 案2 **Supabaseを使った部分一致検索**

SupabaseはPostgreSQLをベースとしたデータベースを提供しており、部分一致検索を簡単に実装できるクエリ機能が用意されています。`LIKE`クエリやフルテキスト検索を活用することで、Firestoreよりも柔軟な検索が可能です。

`ilike()`関数を使うことで、入力されたテキスト（`searchText`）を含むデータが返されます。この結果をFlutterFlowの`ListView`に表示します。

## **案3 Cloud Functionを使った部分一致検索**

Google Cloud Functionsを使って、Firestoreに直接クエリを送信し、部分一致検索を実装する方法です。Cloud Functionsでは、Firestoreの制約を回避して、部分一致検索が可能

- FlutterFlowの「Cloud Functions」から、作成した`searchPosts`関数を呼び出します。
- 検索結果を`ListView`に表示するように設定し、ユーザーが入力した検索語に基づいて結果を取得します。

その他、上記が難しければ Simple Searchが微妙に部分一致対応しているので、使ってもいいかもしれません。

> **[Simple Search | FlutterFlow Documentation](https://docs.flutterflow.io/integrations/search/simple-search/)**
>
> Learn how to implement simple search functionality in your FlutterFlow app to search local data on a device.

---

<div class="post-metadata">

**Author:** ![digi](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@digi](https://www.nocode-faq.com/u/digi)\
**Post date:** [2024 年 10 月 30 日午後 1:46 UTC](https://www.nocode-faq.com/t/topic/4411/3 "2024-10-30T13:46:03Z")

</div>

迅速なご回答ありがとうございます。さっそく試してみようと思います。
