# Reusable element であるHeaderにSearch boxを追加して検索した際のPo......

**URL:** <https://www.nocode-faq.com/t/topic/694>\
**Category:** bubble\
**Created:** [2021 年 2 月 2 日午前 10:34 UTC](https://www.nocode-faq.com/t/topic/694 "2021-02-02T10:34:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Question\_user](https://avatars.discourse-cdn.com/v4/letter/q/53a042/32.png) [@Question\_user](https://www.nocode-faq.com/u/Question_user)\
**Post date:** [2021 年 2 月 2 日午前 10:34 UTC](https://www.nocode-faq.com/t/topic/694/1 "2021-02-02T10:34:52Z")

</div>

Reusable element であるHeaderにSearch boxを追加して検索した際のPostの一覧を表示したいのですがわかりません。  
添付の画像のようにPostの内容について質問を検索することができるのですが、任意の検索ワードをもつ要素の一覧を表示したり、サジェストで出てきたPostをクリックするとそのままPostの詳細ページに飛べるようにしたいです（Googleの検索ページみたいなものです）  
【やったこと】  
bubble 検索機能で調べましたがみなさんheaderのreusable elementではなくある特定のページ内のみの検索でしたのでそれならできるかなと思います。しかし、自分は検索画面を全ての画面のHeaderとして置いているのでそれをどうやるのかわかりません。例えばUserページにいる時にPostを検索してもPost-index(一覧）に飛べるようにしたいです。

---

<div class="post-metadata">

**Author:** ![Answer\_user](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@Answer\_user](https://www.nocode-faq.com/u/Answer_user)\
**Post date:** [2021 年 2 月 2 日午前 10:34 UTC](https://www.nocode-faq.com/t/topic/694/2 "2021-02-02T10:34:52Z")

</div>

回答者１  
状況がはっきり分からないのですが回答してみます  
・検索について  
サーチボックスよりインプットの方が良いかと思います。リピーティンググループにインプットのvalueでfilterをかけると良いかと思います  
googleのようにサジェストまでしたいならプラグインを使った方が良いと思います  
・ページ遷移  
検索のページからpostページへ遷移する際にcurrent cell’s post を渡すワークフローがあれば良いかと

回答者２  
“サジェストで出てきたPostをクリックするとそのままPostの詳細ページに飛べるようにしたいです”  
これは例えば、Repeating GroupとGroup Focusで実装できます。  
入力された値が含まれる情報をDBで検索し、サジェスト表示します。  
クリックすると、textに入れたgo to pageでそのページへ遷移します。

検索機能自体は、ノーコードラボさんの記事が参考になると思います。  
サジェストと組み合わせることで、使いやすい検索機能が作れると思います。  
Bubbleで検索してみよう！ - ノーコード ラボ [https://blog.nocodelab.jp/entry/2019/11/01/Bubbleで検索してみよう！](https://blog.nocodelab.jp/entry/2019/11/01/Bubble%E3%81%A7%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%EF%BC%81)

回答者３  
おそらく実現されたいのは ページ遷移をする場合の検索だと思います。  
urlにパラメータを持たせて 遷移先のinputをconditionalで initialに設定して page loadでdisplay listですね。  
ここでやってる感じで:下向き指差し:

> **[「コレモ」本をシェアする](https://koremo.bubbleapps.io/)**
>
> 読書好きのための、書籍シェアサービスです。月額300円で本が何冊でも借り放題！全く新しい本をシェアするプラットフォームで、コレも読みたいを叶えます。

## 参考画像

 ![スクリーンショット 2020-09-13 11.34.22.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/d01763f8cfe5faffc7ae48340303abe1ddaddd3b.png)

 ![スクリーンショット 2020-09-13 11.34.19.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/7f39cef16b6c6c6f933f30d565126a81a300375e.png)

![画面収録 2020-09-13 21.07.14.mov](https://dl.airtable.com/.attachments/70fcccb13ee52e2d92d128ab000c19d4/2b5a821c/2020-09-1321.07.14.mov)

 ![skitch.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/8a831beddbb0cfeea603feb257177b58f1055083.jpeg)

 ![skitch-1.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/ed1e641496ca24ba3a3ce539d27f8678e1ecfbdf.jpeg)

 ![skitch-2.png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/986a30ebadf06e8cc1bbf2018469abdd78553f73.jpeg)

## 参考URL

[https://blog.nocodelab.jp/entry/2019/11/01/Bubbleで検索してみよう！](https://blog.nocodelab.jp/entry/2019/11/01/Bubble%E3%81%A7%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%EF%BC%81)

> **[「コレモ」本をシェアする](https://koremo.bubbleapps.io/)**
>
> 読書好きのための、書籍シェアサービスです。月額300円で本が何冊でも借り放題！全く新しい本をシェアするプラットフォームで、コレも読みたいを叶えます。
