はじめに
Webアプリを作る際に、ユーザーの入力をサポートする「入力補完」機能は非常に便利です。
今回はPythonのStreamlitを使って、シンプルながら実用的な入力補完機能の実装方法を紹介します。この記事は自分の学習内容の備忘録として書いていますが、同じような機能を実装したい方の参考になれば幸いです。
実装するもの
今回実装するのは次の機能を持つ簡単なフォームです：
- ドロップダウンリストから選択できる入力補完
- リストにない項目を自由に入力できるカスタム入力欄
- 入力内容の確認と検証
コード全体
まずは完成したコード全体を見てみましょう：
import streamlit as st
# 入力候補（本来はDBから取得してもOK）
suggestions = ["Apple", "Banana", "Blueberry", "Cherry", "Grape", "Mango", "Orange", "Peach"]
st.set_page_config(page_title="入力補完サンプル", layout="centered")
st.title("🍓 入力補完付きフォーム")
# 補完候補から選択
selected = st.selectbox("フルーツを選ぶか入力してね", [""] + suggestions)
# 新しい値を入力したい場合
if selected == "":
custom_value = st.text_input("新しいフルーツ名を入力")
else:
custom_value = selected
# 入力確認
if st.button("✅ 決定"):
if custom_value:
st.success(f"選ばれたフルーツ：**{custom_value}**")
else:
st.warning("何か入力してください！")
たった20行程度のコードで、実用的な入力補完機能が実装できました。
コードの解説
1. 入力候補の準備
# 入力候補（本来はDBから取得してもOK）
suggestions = ["Apple", "Banana", "Blueberry", "Cherry", "Grape", "Mango", "Orange", "Peach"]
ここでは固定のリストを使っていますが、実際のアプリケーションではデータベースから動的に取得するケースが多いでしょう。
2. ページの基本設定
st.set_page_config(page_title="入力補完サンプル", layout="centered")
st.title("🍓 入力補完付きフォーム")
set_page_configでページのタイトルとレイアウトを設定しています。layout="centered"はモバイル表示でも見やすくするための設定です。
3. 入力補完の実装
# 補完候補から選択
selected = st.selectbox("フルーツを選ぶか入力してね", [""] + suggestions)
Streamlitのselectboxは、ドロップダウンリストから選択する機能を提供します。[""] + suggestionsとすることで、空の選択肢を先頭に追加しています。これにより「何も選択しない」状態を作ることができます。
4. カスタム入力の実装
# 新しい値を入力したい場合
if selected == "":
custom_value = st.text_input("新しいフルーツ名を入力")
else:
custom_value = selected
リストから選択した場合はその値を使い、空の選択肢（""）を選んだ場合は、テキスト入力欄を表示して自由に入力できるようにしています。
5. 入力確認と検証
# 入力確認
if st.button("✅ 決定"):
if custom_value:
st.success(f"選ばれたフルーツ：**{custom_value}**")
else:
st.warning("何か入力してください！")
決定ボタンをクリックしたときに入力値の検証を行います。値が空でなければ成功メッセージを表示し、空の場合は警告メッセージを表示します。st.successとst.warningを使うことで、視覚的にもわかりやすいフィードバックを提供できます。
発展的な改良案
このシンプルな実装をベースに、さらに機能を追加することもできます：
-
検索機能の強化:
-
st.selectboxの代わりにst.multiselectを使って複数選択に対応 - 正規表現や曖昧検索による入力補完の改善
-
-
リアルタイム入力検証:
- 入力値に対する即時バリデーション
- 入力形式のガイダンス表示
-
データの永続化:
- 入力された新しい値をデータベースに保存
- ユーザーごとに過去の入力履歴を記憶
-
UI/UXの改善:
- CSSカスタマイズでモバイル表示を最適化
- キーボードショートカットの追加
まとめ
Streamlitを使うことで、わずか数行のPythonコードで実用的な入力補完機能を実装できました。特に以下のポイントがポイントです：
-
selectboxと条件分岐を組み合わせた柔軟な入力方法 - モバイル対応を意識したシンプルなUI設計
- 適切なフィードバックによるユーザー体験の向上
今回の実装はあくまで基本ですが、実際のアプリケーションに合わせてカスタマイズすることで、より高度な入力補完機能を構築できます。
注意事項
-
入力補完の仕組みについて
本記事のサンプルでは、Streamlit のselectboxを使った入力補完を実装していますが、これはドロップダウンメニューに静的な候補を表示する形式です。ユーザーが文字を入力した際に、入力内容に応じて候補を動的に変えたり、リアルタイムでドロップダウンが自動的に表示されるオートサジェスト機能（例：Google検索のような）は含まれていません。 -
自動サジェストの実現には制限がある
Streamlit 標準の部品では、文字入力中にドロップダウンが自動的に開いて候補が絞り込まれるようなシームレスなオートコンプリートはサポートされていません。そういったUIを実現したい場合は、JavaScript や React で作られたカスタムコンポーネント、またはコミュニティ製の Streamlit 拡張コンポーネントの利用が必要です。 -
大規模データセットへの対応
本記事では小規模な固定リスト（フルーツ名）を使っていますが、選択肢が数百〜数千件になると、パフォーマンスが低下したり、ユーザー体験が悪化する可能性があります。大量データを扱う場合は、候補を事前にフィルタリングする処理や、サーバーサイド検索の導入が推奨されます。 -
UI/UXのカスタマイズ制限
selectboxやtext_inputなどの標準ウィジェットは、スタイルや挙動のカスタマイズに限界があります。モバイル対応のUIをより柔軟に調整したい場合や、インタラクティブな入力補完体験を追求する場合は、CSSの調整や外部コンポーネントの導入が必要になることがあります。 -
拡張を見据えた設計を
本記事の内容は基本的な実装例ですが、将来的により高度な補完機能を追加したい場合は、コンポーネントの置き換えや構成変更が発生する可能性があります。あらかじめ機能追加を見据えてコードを構成しておくと、保守性の高い設計になります。
参考リンク
フルーツ選択の例を使いましたが、この方法は商品名、地域名、タグなど様々な入力補完に応用できます。皆さんのプロジェクトでカスタマイズして活用してみてください！