# Streamlit Searchbar Component
A customizable searchbar component for Streamlit with autosuggestions and advanced features.
## Features
- Autocomplete suggestions as you type
- Customizable styling
- Clear button to reset the input
- Plus button for additional actions on suggestions
- Keyboard navigation support
- Ability to return selected suggestion or perform a search
- Customizable icons and colors
- Compact suggestion layout with support for multi-line content
- Option to keep suggestions open when the plus button is clicked
- Control input field behavior when suggestions are highlighted
- Close the suggestion window when the input field is empty
- Bold text within suggestions
## Installation
You can install the searchbar component using pip:
```bash
pip install searchbar-component
```
## Usage
Here's a basic example of how to use the searchbar component:
```python
import streamlit as st
from searchbar_component import searchbar
def search_function(query):
# Implement your search logic here
return [{"label": f"Result for {query}", "value": query}]
st.title("Search Example")
result = searchbar(
key="my_searchbar",
placeholder="Enter your search",
suggestions=search_function(""),
highlightBehavior="keep", # Options: "keep", "update", "partial"
keep_open_on_plus=True, # Keep suggestions open when plus button is clicked
style_overrides={
"clear": {"fill": "#ff0000"},
"plus": {"fill": "#00ff00"},
}
)
if result:
if result.get("interaction") == "search":
query = result["value"]
# Update suggestions based on the search query
elif result.get("interaction") == "select":
selected = result["value"]
st.write(f"You selected: {selected['label']}")
elif result.get("interaction") == "submit":
query = result["value"]
st.write(f"You submitted: {query}")
elif result.get("interaction") == "plus_click":
clicked_suggestion = result["value"]
st.write(f"You clicked the plus button for: {clicked_suggestion['label']}")
# Suggestions will remain open here if keep_open_on_plus is True
elif result.get("interaction") == "reset":
st.write("Search has been reset")
```
## API Reference
### `searchbar(placeholder, key, suggestions, return_selection_only, show_clear_button, show_plus_button, keep_open_on_plus, style_overrides, highlightBehavior)`
- `placeholder` (str, optional): Placeholder text for the search input. Default is "Search...".
- `key` (str, optional): Unique key for the component instance.
- `suggestions` (list, optional): List of suggestion objects with 'label' and 'value' keys.
- `return_selection_only` (bool, optional): If True, selecting a suggestion returns it directly without triggering a search. Default is True.
- `show_clear_button` (bool, optional): If True, shows a clear button to reset the input. Default is True.
- `show_plus_button` (bool, optional): If True, shows a plus button next to highlighted suggestions. Default is True.
- `keep_open_on_plus` (bool, optional): If True, keeps the suggestions open when the plus button is clicked. Default is False.
- `style_overrides` (dict, optional): Custom styles for the component. See the Customization section for details.
- `highlightBehavior` (str, optional): Controls input field behavior when suggestions are highlighted. Options are `"keep"` (default), `"update"`, and `"partial"`.
Returns a dictionary with 'interaction' (search, select, submit, plus_click, or reset) and 'value' keys.
## Customization
You can customize the appearance of the searchbar using the `style_overrides` parameter:
```python
style_overrides = {
"clear": {
"width": 20,
"height": 20,
"fill": "#ff0000"
},
"plus": {
"width": 18,
"height": 18,
"fill": "#00ff00"
},
"input": {
"backgroundColor": "#f0f0f0",
"color": "#333"
},
"suggestion": {
"backgroundColor": "#fff",
"color": "#333",
"hoverBackgroundColor": "#e0e0e0",
"hoverColor": "#000"
}
}
```
## Troubleshooting
### Common Issues
#### TypeError: Object of type function is not JSON serializable
This error occurs when trying to pass a function as an argument to the searchbar component. Since Streamlit components communicate using JSON, all arguments must be JSON serializable.
**Example of Incorrect Usage:**
```python
result = searchbar(
key="my_searchbar",
placeholder="Enter your search",
suggestions=search_function, # This will cause an error
highlightBehavior="keep",
keep_open_on_plus=True,
style_overrides={
"clear": {"fill": "#ff0000"},
"plus": {"fill": "#00ff00"},
}
)
```
**Solution:**
Call the function and pass its return value instead:
```python
import streamlit as st
from searchbar_component import searchbar
def search_function(query):
# Implement your search logic here
return [{"label": f"Result for {query}", "value": query}]
st.title("Search Example")
# Call the function to get suggestions
suggestions = search_function("")
result = searchbar(
key="my_searchbar",
placeholder="Enter your search",
suggestions=suggestions, # This should be the return value of the function
highlightBehavior="keep", # Options: "keep", "update", "partial"
keep_open_on_plus=True, # Keep suggestions open when plus button is clicked
style_overrides={
"clear": {"fill": "#ff0000"},
"plus": {"fill": "#00ff00"},
}
)
if result:
if result.get("interaction") == "search":
query = result["value"]
# Update suggestions based on the search query
elif result.get("interaction") == "select":
selected = result["value"]
st.write(f"You selected: {selected['label']}")
elif result.get("interaction") == "submit":
query = result["value"]
st.write(f"You submitted: {query}")
elif result.get("interaction") == "plus_click":
clicked_suggestion = result["value"]
st.write(f"You clicked the plus button for: {clicked_suggestion['label']}")
# Suggestions will remain open here if keep_open_on_plus is True
elif result.get("interaction") == "reset":
st.write("Search has been reset")
```
## Additional Notes
- Suggestions are displayed in a compact layout, with reduced vertical padding for a sleeker appearance.
- Long suggestions will wrap to multiple lines without breaking words, ensuring readability.
- The plus button is positioned on the right side of each suggestion and only appears for the highlighted suggestion.
- By default, selecting a suggestion or clicking the plus button will automatically close the suggestion list.
- If `keep_open_on_plus` is set to True, the suggestion list will remain open when the plus button is clicked, allowing for multiple selections or actions without closing the list.
- When the input field is empty, the suggestion window will close automatically.
- Bold text within suggestions is supported.
## Development Setup
If you want to modify or rebuild the frontend component, you'll need Node.js. This project was developed using Node.js version 16.20.2. To check your Node.js version, run:
```bash
node -v
```
If you don't have Node.js installed or need to update it, visit [nodejs.org](https://nodejs.org/) to download and install the appropriate version.
After ensuring you have the correct Node.js version:
1. Navigate to the `frontend` directory of the project.
2. Install the required npm packages:
```bash
npm install
```
3. To build the frontend component after making changes:
```bash
npm run build
```
Note: The pre-built component is included in the PyPI package, so end-users don't need Node.js to use the searchbar in their Streamlit apps.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License.
Raw data
{
"_id": null,
"home_page": "https://github.com/weeks888/searchbar_component",
"name": "searchbar-component",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "streamlit component searchbar autocomplete",
"author": "chris weeks",
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/1a/a4/e689685cda27d5dc0366a5799cd2ee48428681e303e48af1c7a26efcd0d1/searchbar_component-0.2.7.tar.gz",
"platform": null,
"description": "\n# Streamlit Searchbar Component\n\nA customizable searchbar component for Streamlit with autosuggestions and advanced features.\n\n## Features\n\n- Autocomplete suggestions as you type\n- Customizable styling\n- Clear button to reset the input\n- Plus button for additional actions on suggestions\n- Keyboard navigation support\n- Ability to return selected suggestion or perform a search\n- Customizable icons and colors\n- Compact suggestion layout with support for multi-line content\n- Option to keep suggestions open when the plus button is clicked\n- Control input field behavior when suggestions are highlighted\n- Close the suggestion window when the input field is empty\n- Bold text within suggestions\n\n## Installation\n\nYou can install the searchbar component using pip:\n\n```bash\npip install searchbar-component\n```\n\n## Usage\n\nHere's a basic example of how to use the searchbar component:\n\n```python\nimport streamlit as st\nfrom searchbar_component import searchbar\n\ndef search_function(query):\n # Implement your search logic here\n return [{\"label\": f\"Result for {query}\", \"value\": query}]\n\nst.title(\"Search Example\")\n\nresult = searchbar(\n key=\"my_searchbar\",\n placeholder=\"Enter your search\",\n suggestions=search_function(\"\"),\n highlightBehavior=\"keep\", # Options: \"keep\", \"update\", \"partial\"\n keep_open_on_plus=True, # Keep suggestions open when plus button is clicked\n style_overrides={\n \"clear\": {\"fill\": \"#ff0000\"},\n \"plus\": {\"fill\": \"#00ff00\"},\n }\n)\n\nif result:\n if result.get(\"interaction\") == \"search\":\n query = result[\"value\"]\n # Update suggestions based on the search query\n elif result.get(\"interaction\") == \"select\":\n selected = result[\"value\"]\n st.write(f\"You selected: {selected['label']}\")\n elif result.get(\"interaction\") == \"submit\":\n query = result[\"value\"]\n st.write(f\"You submitted: {query}\")\n elif result.get(\"interaction\") == \"plus_click\":\n clicked_suggestion = result[\"value\"]\n st.write(f\"You clicked the plus button for: {clicked_suggestion['label']}\")\n # Suggestions will remain open here if keep_open_on_plus is True\n elif result.get(\"interaction\") == \"reset\":\n st.write(\"Search has been reset\")\n```\n\n## API Reference\n\n### `searchbar(placeholder, key, suggestions, return_selection_only, show_clear_button, show_plus_button, keep_open_on_plus, style_overrides, highlightBehavior)`\n\n- `placeholder` (str, optional): Placeholder text for the search input. Default is \"Search...\".\n- `key` (str, optional): Unique key for the component instance.\n- `suggestions` (list, optional): List of suggestion objects with 'label' and 'value' keys.\n- `return_selection_only` (bool, optional): If True, selecting a suggestion returns it directly without triggering a search. Default is True.\n- `show_clear_button` (bool, optional): If True, shows a clear button to reset the input. Default is True.\n- `show_plus_button` (bool, optional): If True, shows a plus button next to highlighted suggestions. Default is True.\n- `keep_open_on_plus` (bool, optional): If True, keeps the suggestions open when the plus button is clicked. Default is False.\n- `style_overrides` (dict, optional): Custom styles for the component. See the Customization section for details.\n- `highlightBehavior` (str, optional): Controls input field behavior when suggestions are highlighted. Options are `\"keep\"` (default), `\"update\"`, and `\"partial\"`.\n\nReturns a dictionary with 'interaction' (search, select, submit, plus_click, or reset) and 'value' keys.\n\n## Customization\n\nYou can customize the appearance of the searchbar using the `style_overrides` parameter:\n\n```python\nstyle_overrides = {\n \"clear\": {\n \"width\": 20,\n \"height\": 20,\n \"fill\": \"#ff0000\"\n },\n \"plus\": {\n \"width\": 18,\n \"height\": 18,\n \"fill\": \"#00ff00\"\n },\n \"input\": {\n \"backgroundColor\": \"#f0f0f0\",\n \"color\": \"#333\"\n },\n \"suggestion\": {\n \"backgroundColor\": \"#fff\",\n \"color\": \"#333\",\n \"hoverBackgroundColor\": \"#e0e0e0\",\n \"hoverColor\": \"#000\"\n }\n}\n```\n\n## Troubleshooting\n\n### Common Issues\n\n#### TypeError: Object of type function is not JSON serializable\n\nThis error occurs when trying to pass a function as an argument to the searchbar component. Since Streamlit components communicate using JSON, all arguments must be JSON serializable.\n\n**Example of Incorrect Usage:**\n\n```python\nresult = searchbar(\n key=\"my_searchbar\",\n placeholder=\"Enter your search\",\n suggestions=search_function, # This will cause an error\n highlightBehavior=\"keep\",\n keep_open_on_plus=True,\n style_overrides={\n \"clear\": {\"fill\": \"#ff0000\"},\n \"plus\": {\"fill\": \"#00ff00\"},\n }\n)\n```\n\n**Solution:**\n\nCall the function and pass its return value instead:\n\n```python\nimport streamlit as st\nfrom searchbar_component import searchbar\n\ndef search_function(query):\n # Implement your search logic here\n return [{\"label\": f\"Result for {query}\", \"value\": query}]\n\nst.title(\"Search Example\")\n\n# Call the function to get suggestions\nsuggestions = search_function(\"\")\n\nresult = searchbar(\n key=\"my_searchbar\",\n placeholder=\"Enter your search\",\n suggestions=suggestions, # This should be the return value of the function\n highlightBehavior=\"keep\", # Options: \"keep\", \"update\", \"partial\"\n keep_open_on_plus=True, # Keep suggestions open when plus button is clicked\n style_overrides={\n \"clear\": {\"fill\": \"#ff0000\"},\n \"plus\": {\"fill\": \"#00ff00\"},\n }\n)\n\nif result:\n if result.get(\"interaction\") == \"search\":\n query = result[\"value\"]\n # Update suggestions based on the search query\n elif result.get(\"interaction\") == \"select\":\n selected = result[\"value\"]\n st.write(f\"You selected: {selected['label']}\")\n elif result.get(\"interaction\") == \"submit\":\n query = result[\"value\"]\n st.write(f\"You submitted: {query}\")\n elif result.get(\"interaction\") == \"plus_click\":\n clicked_suggestion = result[\"value\"]\n st.write(f\"You clicked the plus button for: {clicked_suggestion['label']}\")\n # Suggestions will remain open here if keep_open_on_plus is True\n elif result.get(\"interaction\") == \"reset\":\n st.write(\"Search has been reset\")\n```\n\n## Additional Notes\n\n- Suggestions are displayed in a compact layout, with reduced vertical padding for a sleeker appearance.\n- Long suggestions will wrap to multiple lines without breaking words, ensuring readability.\n- The plus button is positioned on the right side of each suggestion and only appears for the highlighted suggestion.\n- By default, selecting a suggestion or clicking the plus button will automatically close the suggestion list.\n- If `keep_open_on_plus` is set to True, the suggestion list will remain open when the plus button is clicked, allowing for multiple selections or actions without closing the list.\n- When the input field is empty, the suggestion window will close automatically.\n- Bold text within suggestions is supported.\n\n## Development Setup\n\nIf you want to modify or rebuild the frontend component, you'll need Node.js. This project was developed using Node.js version 16.20.2. To check your Node.js version, run:\n\n```bash\nnode -v\n```\n\nIf you don't have Node.js installed or need to update it, visit [nodejs.org](https://nodejs.org/) to download and install the appropriate version.\n\nAfter ensuring you have the correct Node.js version:\n\n1. Navigate to the `frontend` directory of the project.\n2. Install the required npm packages:\n ```bash\n npm install\n ```\n3. To build the frontend component after making changes:\n ```bash\n npm run build\n ```\n\nNote: The pre-built component is included in the PyPI package, so end-users don't need Node.js to use the searchbar in their Streamlit apps.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License.\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A Streamlit component for a search bar with autosuggestions",
"version": "0.2.7",
"project_urls": {
"Homepage": "https://github.com/weeks888/searchbar_component"
},
"split_keywords": [
"streamlit",
"component",
"searchbar",
"autocomplete"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "5e5bc0fd54b19e9b4eae1b6fc1ca23a3c3b267fcf306ee5ac594f07762f1913e",
"md5": "52ca5294455ceb3d2fb69e960f4b6fbb",
"sha256": "71eebabe5a3a546fb7a353a0984e276870ec12219269dd5da80d40be0bd59cd2"
},
"downloads": -1,
"filename": "searchbar_component-0.2.7-py3-none-any.whl",
"has_sig": false,
"md5_digest": "52ca5294455ceb3d2fb69e960f4b6fbb",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 2552267,
"upload_time": "2024-06-29T04:30:27",
"upload_time_iso_8601": "2024-06-29T04:30:27.255943Z",
"url": "https://files.pythonhosted.org/packages/5e/5b/c0fd54b19e9b4eae1b6fc1ca23a3c3b267fcf306ee5ac594f07762f1913e/searchbar_component-0.2.7-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "1aa4e689685cda27d5dc0366a5799cd2ee48428681e303e48af1c7a26efcd0d1",
"md5": "fb26a7cfcb5010b24861d79f83ebdd84",
"sha256": "42e3750160e8ca952bdecccf65a34fa6dd74d398a59576a9321c7672a3da999b"
},
"downloads": -1,
"filename": "searchbar_component-0.2.7.tar.gz",
"has_sig": false,
"md5_digest": "fb26a7cfcb5010b24861d79f83ebdd84",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 454422,
"upload_time": "2024-06-29T04:30:31",
"upload_time_iso_8601": "2024-06-29T04:30:31.695523Z",
"url": "https://files.pythonhosted.org/packages/1a/a4/e689685cda27d5dc0366a5799cd2ee48428681e303e48af1c7a26efcd0d1/searchbar_component-0.2.7.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-06-29 04:30:31",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "weeks888",
"github_project": "searchbar_component",
"github_not_found": true,
"lcname": "searchbar-component"
}
JSON
