{"id":13456560,"url":"https://github.com/appbaseio/searchbox","last_synced_at":"2025-07-12T13:06:35.180Z","repository":{"id":38310753,"uuid":"203510020","full_name":"appbaseio/searchbox","owner":"appbaseio","description":"Lightweight and performance oriented search box UI component libraries for React, Vue, React Native, JS and Flutter","archived":false,"fork":false,"pushed_at":"2025-06-24T10:52:00.000Z","size":38327,"stargazers_count":189,"open_issues_count":69,"forks_count":22,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-10T04:31:24.955Z","etag":null,"topics":["appbase","elasticsearch","elasticsearch-client","flutter","hacktoberfest","javascript","react","react-native","reactivesearch","search-ui","searchbox","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/appbaseio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-21T05:06:02.000Z","updated_at":"2025-06-09T12:41:35.000Z","dependencies_parsed_at":"2023-02-15T09:01:53.555Z","dependency_job_id":"c7806098-8e51-440e-8730-cc303278ac8e","html_url":"https://github.com/appbaseio/searchbox","commit_stats":null,"previous_names":["appbaseio/searchbase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/appbaseio/searchbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Fsearchbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Fsearchbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Fsearchbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Fsearchbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appbaseio","download_url":"https://codeload.github.com/appbaseio/searchbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appbaseio%2Fsearchbox/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264995309,"owners_count":23694937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appbase","elasticsearch","elasticsearch-client","flutter","hacktoberfest","javascript","react","react-native","reactivesearch","search-ui","searchbox","vue"],"created_at":"2024-07-31T08:01:24.085Z","updated_at":"2025-07-12T13:06:35.158Z","avatar_url":"https://github.com/appbaseio.png","language":"JavaScript","readme":"## Searchbox\n\nSearchbox 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.\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/appbaseio/searchbase/tree/master/packages/searchbox\" style=\"padding: 10px; display: inline;\"\u003e\u003cimg width=\"30%\" src=\"https://docs.appbase.io/images/Searchbox_JS@1x.png\" alt=\"searchbox\" title=\"searchbox\" /\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/appbaseio/searchbase/tree/master/packages/react-searchbox\" style=\"padding: 10px; display: inline;\"\u003e\u003cimg width=\"30%\" src=\"https://docs.appbase.io/images/Searchbox_React@1x.png\" alt=\"react_searchbox\" title=\"react searchbox\" /\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/appbaseio/searchbase/tree/master/packages/vue-searchbox\" style=\"padding: 10px; display: inline;\"\u003e\u003cimg width=\"30%\" src=\"https://docs.appbase.io/images/Searchbox_Vue@1x.png\" alt=\"vue searchbox\" title=\"vue searchbox\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://github.com/appbaseio/searchbase/tree/master/packages/native\"\u003e\u003cimg width=\"30%\" src=\"https://opensource.appbase.io/searchbox/images/Searchbox_React_Native.png\" alt=\"react_native_seacrchbox\" title=\"react native searchbox\" /\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/appbaseio/flutter-searchbox/tree/master/flutter_searchbox\"\u003e\u003cimg width=\"30%\" src=\"https://opensource.appbase.io/searchbox/images/Searchbox_Flutter.png\" alt=\"flutter_searchbox\" title=\"flutter searchbox\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n### Getting Started\n\n| Library | Install | Demo | Docs |\n| ------------------------------------------------------------------------------------------ | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |\n| [React Searchbox](https://docs.appbase.io/docs/reactivesearch/react-searchbox/quickstart/) | `npm i @appbaseio/react-searchbox` | [Basic](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/react-searchbox/examples/demo) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/react-searchbox/quickstart/) |\n| [Searchbox](https://docs.appbase.io/docs/reactivesearch/searchbox/Quickstart/) | `npm i @appbaseio/searchbox @appbaseio/searchbase` | [Searchbar with Style](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/searchbox/examples/searchbar-with-style) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/searchbox/Quickstart/) |\n| [Vue Searchbox](https://docs.appbase.io/docs/reactivesearch/vue-searchbox/quickstart/) | `npm i @appbaseio/vue-searchbox` | [Basic](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/vue-searchbox/examples/demo) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/vue-searchbox/quickstart/) |\n| [React Native Searchbox](https://docs.appbase.io/docs/reactivesearch/react-native-searchbox/quickstart/) | `npm i @appbaseio/react-native-searchbox` | [Basic](https://docs.appbase.io/docs/reactivesearch/react-native-searchbox/quickstart/#a-simple-example) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/react-native-searchbox/quickstart/) |\n| [Flutter Searchbox](https://docs.appbase.io/docs/reactivesearch/flutter-searchbox/quickstart/) | [Installation](https://docs.appbase.io/docs/reactivesearch/flutter-searchbox/quickstart/#installation) | [Basic](https://codesandbox.io/s/github/appbaseio/searchbase/tree/master/packages/flutter-searchbox/quickstart/#a-simple-example) | [Quick Start](https://docs.appbase.io/docs/reactivesearch/flutter-searchbox/quickstart/) |\n\n### Features\n\nWe have baked some amazing features in libraries which helps getting insights from searches and also help beautify and enhance search experiences.\n\n| Feature | Description |\n| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Autosuggestions](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--basic) | Built-in autosuggest functionality with keyboard accessibility. |\n| [Search highlighting](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-highlight) | Built-in highlighting on search results. |\n| [Fuzzy Search](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-fuzziness-as-a-number) | Useful for showing the correct results for an incorrect search parameter by taking the fuzziness into account. |\n| Query String Support | URL query string param based on the search query text value.This is useful for sharing URLs with the component state. |\n| [Search Operators](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-searchoperators) | Use special characters in the search query to enable an advanced search behavior. |\n| [Voice Search](https://opensource.appbase.io/playground/?path=/story/search-components-datasearch--with-showvoicesearch) | Enable voice input for searching. |\n| [Search/Click Analytics](https://docs.appbase.io/docs/analytics/Overview/) | 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. |\n| [Feature Results](https://docs.appbase.io/docs/search/Rules/) | Promote and hide your results for search queries. |\n| Customization | Support custom UI components in order to maintain a consistentency with existing design system. |\n\n### Searchbox v/s ReactiveSearch\n\nWe 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.\n\n**Key Differences**\n\n| Property | Searchbox | Reactivesearch |\n| -------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------- |\n| Component Support | Comes with a single `Search` component | Comes with more than 10+ pre-built components for building complex search experiences. |\n| Bundle Size (minified + gzipped) | 17kb - 32kb | \u003e 100KB - Since it supports tree-shaking, the net size depends on the components you import. |\n| Supported for | `React`, `Vue` `Vanilla JS` \u0026 `Android` | `React`, `Vue` \u0026 `React Native` |\n\n### Contributing\n\nPlease check the [contribution guide](.github/CONTRIBUTING.md).\n\n### Other Projects You Might Like\n\n- [**ReactiveSearch**](https://github.com/appbaseio/reactivesearch/) React, React Native and Vue UI components for building data-driven apps with Elasticsearch.\n\n- [**arc**](https://github.com/appbaseio/arc) API Gateway for ElasticSearch (Out of the box Security, Rate Limit Features, Record Analytics and Request Logs).\n\n- [**dejavu**](https://github.com/appbaseio/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.\n\n- [**mirage**](https://github.com/appbaseio/mirage) ReactiveSearch components can be extended using custom Elasticsearch queries. For those new to Elasticsearch, Mirage provides an intuitive GUI for composing queries.\n\n* [**appbase-js**](https://github.com/appbaseio/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.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappbaseio%2Fsearchbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappbaseio%2Fsearchbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappbaseio%2Fsearchbox/lists"}