Searchbox
Searchbox is a lightweight and performance focused search UI component library to query and display results from your ElasticSearch index using declarative props. It's available for React, Vue, React Native and Flutter.
Getting Started
| Library | Install | Demo | Docs |
|---|---|---|---|
| React Searchbox | npm i @appbaseio/react-searchbox |
Basic | Quick Start |
| Searchbox | npm i @appbaseio/searchbox @appbaseio/searchbase |
Searchbar with Style | Quick Start |
| Vue Searchbox | npm i @appbaseio/vue-searchbox |
Basic | Quick Start |
| React Native Searchbox | npm i @appbaseio/react-native-searchbox |
Basic | Quick Start |
| Flutter Searchbox | Installation | Basic | Quick Start |
Features
We have baked some amazing features in libraries which helps getting insights from searches and also help beautify and enhance search experiences.
| Feature | Description |
|---|---|
| Autosuggestions | Built-in autosuggest functionality with keyboard accessibility. |
| Search highlighting | Built-in highlighting on search results. |
| Fuzzy Search | Useful for showing the correct results for an incorrect search parameter by taking the fuzziness into account. |
| Query String Support | URL query string param based on the search query text value.This is useful for sharing URLs with the component state. |
| Search Operators | Use special characters in the search query to enable an advanced search behavior. |
| Voice Search | Enable voice input for searching. |
| Search/Click Analytics | Search analytics allows you to keep track of the users' search activities which helps you to improve your search experience based on the analytics extracted by Appbase.io. |
| Feature Results | Promote and hide your results for search queries. |
| Customization | Support custom UI components in order to maintain a consistentency with existing design system. |
Searchbox v/s ReactiveSearch
We recommend using React Searchbox over DataSearch or CategorySearch components of ReactiveSearch when you only need to integrate a searchbox UI component into your app. If you are planning to use other UI filters or result components, it is ideal to use the ReactiveSearch library instead of this standalone component.
Key Differences
| Property | Searchbox | Reactivesearch |
|---|---|---|
| Component Support | Comes with a single Search component |
Comes with more than 10+ pre-built components for building complex search experiences. |
| Bundle Size (minified + gzipped) | 17kb - 32kb | > 100KB - Since it supports tree-shaking, the net size depends on the components you import. |
| Supported for | React, Vue Vanilla JS & Android |
React, Vue & React Native |
Contributing
Please check the contribution guide.
Other Projects You Might Like
-
ReactiveSearch React, React Native and Vue UI components for building data-driven apps with Elasticsearch.
-
arc API Gateway for ElasticSearch (Out of the box Security, Rate Limit Features, Record Analytics and Request Logs).
-
dejavu allows viewing raw data within an appbase.io (or Elasticsearch) app. Soon to be released feature: An ability to import custom data from CSV and JSON files, along with a guided walkthrough on applying data mappings.
-
mirage ReactiveSearch components can be extended using custom Elasticsearch queries. For those new to Elasticsearch, Mirage provides an intuitive GUI for composing queries.
- appbase-js While building search UIs is dandy with Reactive Search, you might also need to add some input forms. appbase-js comes in handy there.