# LINEのトークルームのように検索部にハイライトをつける方法

**URL:** https://www.nocode-faq.com/t/topic/3979
**Category:** bubble
**Created:** [2023 年 10 月 16 日午前 2:42 UTC](https://www.nocode-faq.com/t/topic/3979 "2023-10-16T02:42:53Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![corp](https://avatars.discourse-cdn.com/v4/letter/c/ed655f/32.png) [@corp](https://www.nocode-faq.com/u/corp)
#### Post date: [2023 年 10 月 16 日午前 2:42 UTC](https://www.nocode-faq.com/t/topic/3979/1 "2023-10-16T02:42:54Z")

</div>

### 1.前提条件

チャット内で検索の機能を実装しており下記の2点の実装方法がわからず苦戦しております。

①検索して該当の文字があった際、そちらにハイライトをつける  
→検索対象はチャット内のテキスト  
②複数該当データがあった際に矢印などでそれぞれの場所に遷移する

### 2.発生している問題

・検索をして該当のテキストがあった際にハイライトが付けられない  
・複数該当データがあった際、最も新しい該当データの場所に移動はできるがほかの該当データの場所に遷移できない。

### 5.スクリーンショット

スクリーンショットをそれぞれ添付します。

 ![実装したい機能のイメージ](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4803c2886b489ef1509ee73e988fa6c5185ae853.png)

---

<div class="post-metadata">

### Author: ![nocodecamp.jimu](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/nocodecamp.jimu/32/3214_2.png) [@nocodecamp.jimu](https://www.nocode-faq.com/u/nocodecamp.jimu)
#### Post date: [2023 年 10 月 20 日午前 9:30 UTC](https://www.nocode-faq.com/t/topic/3979/2 "2023-10-20T09:30:59Z")

</div>

3日以上回答が付きませんね。  
これは運営Botです。なかなか回答が付かない場合には、NoCodeCampコーチングのご活用もご検討ください。

コーチングでは、あなたの具体的な課題に焦点を当て、より専門的な指導を受けることが可能です。 これは、過去の実績のある熟練した専門家が、あなたの疑問や問題を親身になってサポートいたします。  
もちろん、技術スレッドでの無料サポートは続けて提供しておりますが、より詳細な解決策を求める場合や、迅速な回答を希望される場合は、コーチングサービスを活用検討ください。

> **[NoCodeCamp](https://nocodecamp.co.jp/coaching)**
>
> 世の中の「最適」をITで実現。NoCodeCampは企業のIT内製化を支援します。日本初のノーコードオンラインサロンNoCodeCamp運営中。Bubble,Adalo,Glideなど最新情報が集まります。

---

<div class="post-metadata">

### Author: ![rentaro.kashima.bz](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/rentaro.kashima.bz/32/6594_2.png) [@rentaro.kashima.bz](https://www.nocode-faq.com/u/rentaro.kashima.bz)
#### Post date: [2023 年 10 月 24 日午前 9:34 UTC](https://www.nocode-faq.com/t/topic/3979/3 "2023-10-24T09:34:53Z")

</div>

とりあえずハイライトのところだけですが、  
このプラグイン入れるとできそうですね 🙂

> **[Highlight Text Plugin for Bubble, by Rapid Dev](https://bubble.io/plugin/highlight-text-1569067729186x167072794867662850)**
>
> Highlight Text Plugin page on Bubble, by Rapid Dev. Add Highlight Text in one click to your app. Bubble lets you build web apps without any code.

DEMO画面では"our" がキーワードとなっていますが、これを検索ワードとしてinput value等に変更すればそれがハイライトさせるはずです。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/9dc3259312225c53fada9cb552fd3a378a7bc5db.png)

---

<div class="post-metadata">

### Author: ![corp](https://avatars.discourse-cdn.com/v4/letter/c/ed655f/32.png) [@corp](https://www.nocode-faq.com/u/corp)
#### Post date: [2023 年 10 月 25 日午前 12:55 UTC](https://www.nocode-faq.com/t/topic/3979/4 "2023-10-25T00:55:17Z")

</div>

ご回答ありがとうございます！！  
とても助かりました！  
早速試してみます！

---

<div class="post-metadata">

### Author: ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)
#### Post date: [2023 年 10 月 25 日午後 7:30 UTC](https://www.nocode-faq.com/t/topic/3979/5 "2023-10-25T19:30:25Z")

</div>

このプラグインいいですね。  
Command+F Ctrl+Fの検索機能が作れそう。  
ただ、データ型じゃない場合は、Scroll toの遷移先を指定するの複雑そうですね。  
何気なく使ってた機能でも実装しようと思うとけっこう大変なんだなー💦