# 入力サジェストを作って、インプットの表記揺れを無くしたい

**URL:** <https://www.nocode-faq.com/t/topic/4172>\
**Category:** bubble\
**Created:** [2024 年 3 月 10 日午前 4:36 UTC](https://www.nocode-faq.com/t/topic/4172 "2024-03-10T04:36:02Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![t.ishii1990](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t.ishii1990](https://www.nocode-faq.com/u/t.ishii1990)\
**Post date:** [2024 年 3 月 10 日午前 4:36 UTC](https://www.nocode-faq.com/t/topic/4172/1 "2024-03-10T04:36:02Z")

</div>

### 1.前提条件

・ユーザーが情報をインプットする際に表記揺れをしないようにしたい  
・自分の考えとしては、「①：過去にDBに登録している値は入力サジェストが表示されるようになる」もしくは「②：過去にDBに登録している値をドロップリストで選択する方式（ただし新しい値の場合はtext入力ができる）」という方法が良いと思っている

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

上記の実装方法を調べても分からない・・・

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

### 6.試したこと

shapeの上部が案①、下が案②のイメージです。  
※案①についてはまるで方法がわからず、、、  
※案②についてはDB（フィールド名がfoodです）に入っているものだけ選択できるようにしてみたが、新規の値を入れるときの回避方法がわからず、、、

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5aa8351ccc2c6043b0d45e821e67f7cab744c44c.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7805e42009b9b5e60dcb57aaaa4a3e41c248db8f.png)

### 7.補足情報 （調べたURL/参考になりそうな事例）

あまりこれといったものが見つからなかったです。

どうか、よろしくお願いします。

---

<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:** [2024 年 3 月 10 日午後 2:02 UTC](https://www.nocode-faq.com/t/topic/4172/2 "2024-03-10T14:02:03Z")

</div>

SearchBoxを使うと、DBに登録されている内容を検索して表示することができます。  
登録していないデータの場合でもAllow entries not in…にチェックを入れることで、入力許可することができます。

 ![スクリーンショット 2024-03-10 15.54.21](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7c42a2e98e94a2d71d179c1567e11b0cb978978d.png)

---

<div class="post-metadata">

**Author:** ![t.ishii1990](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t.ishii1990](https://www.nocode-faq.com/u/t.ishii1990)\
**Post date:** [2024 年 3 月 11 日午前 12:06 UTC](https://www.nocode-faq.com/t/topic/4172/3 "2024-03-11T00:06:47Z")

</div>

こちらありがとうございます。  
search boxを試してみたらできました！！  
これでユーザーの表記揺れさせないinputができそうですmm  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/783b656a918f58dfd351b8915a403991add08bdf.png)  
※サンプル画面の例を少し変えてみました

問題が解決したうえで更にwantな実装なのですが、  
・ユーザーが入力する時の初期条件としてはデフォルトで「マクドナルド」であり、「マック」や「マクド」ではない  
・上記の目的としては、ユーザー間の表記揺れを防ぐため。将来的には例えば好きなハンバーガー店ランキングを作り「マクドナルド」と入力したユーザーの数を集計したい  
・なお、チェーン店以外の店も許容したい（Allow entries not in…の入力を許容させた）ためdroplist形式では難しそうと考えてます  
・一方で、単なるsearch boxだけにしてしまうとユーザーによってマックもマクドも入力されてしまいサジェストが荒れそうな予感です・・・

追加の質問で恐縮ですが、なにとぞよろしくお願いします！

---

<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:** [2024 年 3 月 11 日午前 11:31 UTC](https://www.nocode-faq.com/t/topic/4172/4 "2024-03-11T11:31:32Z")

</div>

解決したようで何よりです。  
追加の質問は難しそうですね。  
被っている可能性のある候補を作る必要があるんじゃないでしょうか。  
好きなハンバーガー店であれば、予め店名を入れておき、管理してしまったほうが良いと思いますよ。

---

<div class="post-metadata">

**Author:** ![t.ishii1990](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t.ishii1990](https://www.nocode-faq.com/u/t.ishii1990)\
**Post date:** [2024 年 3 月 14 日午前 7:42 UTC](https://www.nocode-faq.com/t/topic/4172/6 "2024-03-14T07:42:46Z")

</div>

こちらご回答ありがとうございます。  
追加でもう一点、search boxの使い方について質問させてください。

添付画像のように「マクドナルド」とすでに保存している値を参照して選択した場合に、データがうまく保存できません。  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/dd1fb5f6d5b8d638f85d0d3345df731ffca4a58b.png)

Workflowとしては、  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/398563a11e95b3e17f176cb812fdbb22c136ceaa.png)  
のようのようにしているので、おそらく自分でタイプした値しか保存できていないものと推測しています。

もともとの設定はこちらの画像のとおりです。  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6c710d4d657e5088ec158238480d02207ddbf4df.png)

このようなケースにおいて、  
・過去に入力した値→参照したものを選択する  
・過去に入力していない値→タイピングする  
といった両方のケースに対応できる保存の仕方があれば、ご教示いただけますと幸いですmm

---

<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:** [2024 年 3 月 15 日午前 9:48 UTC](https://www.nocode-faq.com/t/topic/4172/7 "2024-03-15T09:48:38Z")

</div>

Search box typed text とSearch box valueは別物になります。  
前者には入力したデータが入り、後者には選択したデータが入ります。  
あとは入っている値によって条件分岐してあげればOKです。

---

<div class="post-metadata">

**Author:** ![t.ishii1990](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t.ishii1990](https://www.nocode-faq.com/u/t.ishii1990)\
**Post date:** [2024 年 3 月 15 日午後 10:48 UTC](https://www.nocode-faq.com/t/topic/4172/8 "2024-03-15T22:48:54Z")

</div>

こちらありがとうございます。  
教えて頂いた内容で実装することができました！  
備忘として、実装したworkflowを残しておきます。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/7cce6e4bf9bc5c628b225759e70cf17b9031bbcf.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/b299db94f2ac777ad81c1a3a644210c6e75ba306.png)

---

<div class="post-metadata">

**Author:** ![t.ishii1990](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t.ishii1990](https://www.nocode-faq.com/u/t.ishii1990)\
**Post date:** [2024 年 3 月 15 日午後 10:50 UTC](https://www.nocode-faq.com/t/topic/4172/9 "2024-03-15T22:50:55Z")

</div>

ただ、追加でもう1点困りごとが出てきてしまい質問させてください。

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

DBに入力した値が複数同一の値がある場合に、サジェストに(1)(2)…といった形で重複して表示がされてしまいます。

こちらの重複をサジェストに表示させない方法を調べたのですが実装できずでして、、、対応方針教えて頂けますと幸いです。

---

<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:** [2024 年 3 月 16 日午前 6:04 UTC](https://www.nocode-faq.com/t/topic/4172/10 "2024-03-16T06:04:35Z")

</div>

> DBに入力した値が複数同一の値がある場合に、サジェストに(1)(2)…といった形で重複して表示がされてしまいます。

これは表示を制限することはできません。  
RepeatingGroupで作り直し、unique elementsをつけると、重複した値を表示しないことができます。

 ![スクリーンショット 2024-03-16 8.01.04](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/8359f929318c43b1effdd11534ab93218fbdaee6.png)

しかし、今回の場合は、重複した値を入れなければ良いのではないでしょうか。  
値が入力された時に、重複していた場合は登録できない処理を追加すると良いと思います。

 ![スクリーンショット 2024-03-16 8.03.09](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/ce4b58e357fc6baa0b4bced1c472d96772d2c7e1.png)

---

<div class="post-metadata">

**Author:** ![t.ishii1990](https://avatars.discourse-cdn.com/v4/letter/t/a5b964/32.png) [@t.ishii1990](https://www.nocode-faq.com/u/t.ishii1990)\
**Post date:** [2024 年 3 月 16 日午後 10:39 UTC](https://www.nocode-faq.com/t/topic/4172/11 "2024-03-16T22:39:17Z")

</div>

ご返信ありがとうございます！

今回のケースですと、例えば  
・友達リスト＞好きなお店（友達ごとに好きなお店を記録する。ただし友達間で好きなお店が重複するケースもあるので、その場合は同一の店名を入力させたい）  
といった構造を実現したいと思っていたので、好きなお店は友達の人数分入力がされていくユースケースを想定しておりました！

ですので、

> 重複した値を入れなければ良いのではないでしょうか。  
> 値が入力された時に、重複していた場合は登録できない処理を追加すると良い思います  
> は今回は難しいのかなーと思いました。  
> （※ユースケースの後出しですみません。）

ですので、やるならRepeatingGroupで過去に入力した値を表示することな気もしましたが、search boxのように「サジェストで選択式」or「自分で入力する」を両立させるのが少し実装難易度高い気もしており、、  
いっそのことDyamic choiceではなくてStaticsにしておき店名候補として主要なお店の名前をすべて用意していおくほうがいい気もしており、その方針も検討してみることにします！
