文字を打つことで表示される選択肢をクリックすることでinputに表示された選択肢を......

以下の動画のように文字を打つことで表示される選択肢をクリックすることでinputに表示された選択肢を打ち込むにはどのようにすればよろしいでしょうか?

回答者
inputを使われてるんですか?
文字を入れて候補を表示してくれるのsearch boxです!

質問者
ノーコード ラボ さんの記事を参考にアルゴリアという検索サービスを利用しているのですが、記事中ではsearch boxは制約が多いということでinputが使われているんです・・・

回答者
すみません、使ったことがなく。
いま inputを使われてるのに 検索候補が出てきてるんですか?

質問者
いえいえ、いつも教えていただいてばかりなので!笑
inputの下にリピーティンググループを設置し、そこにalgoriaでの検索結果が表示されるようにしています。
そして、現在はそこをクリックすることでdo a search forにより同名のユーザーを検索できるようにしています。

回答者
なるほどです!
そんな方法があるんですね!
では、想像上なのでうまくいくか分かりませんが、custom stateをinputに与えて、repeating groupの候補がクリックさせると
そのinputのcustom stateにcurrent cell’s name(?)を指定して
inputにはconditionalで when this input’s custom state is not empty → initial content = custom state
とするのはどうでしょうか?

質問者
ありがとうございます!
恥ずかしながら今までcustom stateを利用したことがなかったのでめちゃくちゃ勉強になりました笑
試してみたところ、inputには既に文字が入力されているので間に一度インプットをリセットさせる動作を挟むことで実現できました。
本当にありがとうございます!

回答者
おー!よかったですー!(^^)
custom stateは、一時的に値を保存しておくメモみたいな感じで使います!
なので ページが読み込まれたら白紙に戻るっていう性質も データベースとは異なりますね(^^)

すみません!こちら、エディター見せていただくことってできますか?

質問者
こちらになります!

回答者
ありがとうございますー!
あ、inputのresetの処理は使ってないのに実現できたんですか!
ログインできないので確認できないんですが、
今も前と同じ挙動しますか?

質問者
今も同じです!

回答者
あー!reset groupをしたら僕も行けました!
reset inputじゃないんですね!

質問者
もしやalgoliaを使われていますか??

回答者
いえ!今回はデータベースを使ってすらないんです:爆笑:
外部のAPIから取ってきた情報をRepeating Groupに表示して選択して inputに入れたかったんですー!

質問者
なるほど!!
またまた作ったサービスに新しいものが追加されるときを楽しみにしています!笑

回答者
がんばります!:ハハハ:
今回は初めて マネタイズしようと思ってますー!

質問者
すみません、回答者さんのアプリのエディターを拝見することって可能でしょうか?
ご存知かもしれませんが、現状僕の設定では選択肢を選択するとリピーティンググループを消してしまうため、一度しか上のような動作を行えず・・・

エディターありがとうございました!
該当箇所しか拝見していないので詳しくはわかりませんが、本当にDBではなくAPIで商品名を引っ張りだしていて激しく興奮しました笑
一方で、ワークフロー?のどの部分でリピーティンググループが閉じるように設定しているのでしょうか?
set stateでinput値を入れるところまでは追えるのですが・・・
またおそらく違う方法だとは思うのですが、僕もたった今以下の方法でリピーティンググループを消すことができました

回答者
ワークフローではなく、conditinalで制御しています!
repeating groupをhideにすると、そのrepeating groupがズラーっと何十行も出てきた場合、それよりもyポジションが下にあるエレメントがグワーっと押し下げられてしまうんです。
hideにしても、その押し下げられたものは戻らず。。
なので、hideではなく 条件を与えて conditionalで data sourceを空にすることで解決しています!
添付していただいた動画で、もっと候補がずらっと出てくるパターンで試してみてください。
おそらくinputより下に位置するラジオボタンや、dropdowなどの全てのエレメントの位置がグッと下がってしまうはずです

質問者
なるほど!
他のエレメントが下げられるなんてことまで考えられていなかったですし、conditinalでdata sourceを空にするという解決策まで目から鱗です:大泣き:
本当にありがとうございます、早速真似させていただきます!!

参考画像

画面収録 2020-07-31 20.59.20.mov

画面収録 2020-08-01 1.08.15 (1).mov

画面収録 2020-08-01 1.08.15.mov