To use the search component, you need to initialize it by passing the URL of the edge function created from the dashboard.
import { useDocsSearch } from ./index"; function Search() { const searchUrl = "https://myhost.sqlite.cloud:8090/v2/functions/search-js"; // Initialize the useSqlcSearch custom hook const { searchText, // Text to search for searchRes, // Search results searchResPrev, // Search results for the previous searchText searchError, // Error information if search fails validSearchUrl, // Boolean indicating if the search URL is valid isLoading, // Boolean indicating if component is loading search result handleSearch, // Function to handle search input changes } = useDocsSearch(searchUrl); return ( <div> <input type="text" value={searchText} onChange={handleSearch} placeholder="Type here..." /> <pre>{JSON.stringify(searchRes, null, 2)}</pre> </div> ) }The following types can be imported and used:
import type { SearchResult, SearchError, SqlcSearchReturn } from "./index";The code for the edge function to be created is as follows:
const query = request.params.query; const requestid = request.params.requestid; return { data: { search: await connection.sql`SELECT url, options, replace(snippet(documentation, -1, '<b>', '</b>', '...', 10), x'0A', ' ') as 'snippet' FROM documentation WHERE content MATCH concat(${query}, '*') ORDER BY rank LIMIT 256;`, requestid: requestid } }- Replace
documentationwith the name of your database. - Select
JavaScriptas the function type. - Choose an appropriate API KEY with the correct permission to read from your database. The API KEY can be created from the dashboard's Security/API KEY section.
We provide a simple example that shows how to use the component in the tester.js file.
To run the example, download the repo and follow these steps:
- Navigate to the
/js/components/useDocsSearchdirectory. - Run
npm run install. - Run
npm run start.
The example code will be executed at localhost:1234