Creating a search user interface (UI) on top of a Typesense search index can be achieved through various methods, each offering unique features and flexibility. Below, we explore different options for implementing a search UI, leveraging the resources and tools provided by Typesense.
Common for all methods is that you must call Raptor's endpoint from the UI to fetch products and settings from the Raptor Control Panel. Endpoint URL: search.raptorsmartadvisor.com. In addition, you must use an API key and a collection name found under Site Search in the Raptor Control Panel.
1. Using InstantSearch with a Typesense Adapter
InstantSearch is a library that provides a set of UI components to build search interfaces. Typesense offers an adapter to integrate InstantSearch with its search index. You can read more about this integration here, where you will also find examples and demos.
Along with the adapter you will need to install one of the library variants below:
InstantSearch Variants
-
InstantSearch.js: This is a JavaScript library for building search UIs. You can find the integration guide here.
-
InstantSearch React or React Native: For React developers, this variant allows you to build search UIs using React or React Native. The integration guide is available here.
-
InstantSearch Vue: Vue.js developers can use this variant to build search UIs. The integration guide can be found here.
-
InstantSearch Angular: Angular developers can integrate InstantSearch with Typesense using this variant. The guide is available here.
2. Using Autocomplete.js
For implementing a dropdown typeahead search, you can use Autocomplete.js. This library provides a flexible and powerful way to add autocomplete functionality to your search UI. You can read more about it here.
3. Using the Typesense API Directly
If you prefer more control over your search UI, you can interact directly with the Typesense API. This approach allows you to build custom search interfaces tailored to your specific needs. The API documentation is available here.
Conclusion
Choosing the right method to implement your search UI depends on your specific requirements and the technologies you are comfortable with. Whether you opt for InstantSearch, Autocomplete.js, or direct API integration, Typesense provides robust tools and documentation to help you build efficient and user-friendly search interfaces.