Live Search
Use the Search Bar Script to show fast as-you-type results while keeping request volume under control.
Enable live search
Add data-live="true" to the Search Bar Script. The script should be loaded site-wide so search inputs can work on any page where your search form appears.
<script
src="https://www.flowsearch.io/widget.js"
data-key="YOUR_SEARCH_KEY"
data-results-page="/search-results"
data-live="true">
</script>Markup requirements
FlowSearch enhances your existing HTML. At minimum, provide a form or container with a search input. Adddata-fs-search to the form and data-fs-input to the input.
<form data-fs-search>
<input data-fs-input name="q" type="search" placeholder="Search docs..." />
<button data-fs-submit type="submit">Search</button>
</form>Result dropdown behavior
Live search is designed for quick discovery. Visitors can type a term, see matching pages, and either click a result or submit the query to the full results page. Use concise titles and snippets so dropdown results remain readable on mobile.
Rate-limit considerations
Live search can generate more requests than submit-only search. Keep result counts modest, avoid triggering searches for one-character inputs, and use plan limits as a guide for high-traffic pages. If a site seesSEARCH_RATE_LIMIT_EXCEEDED, reduce live-search volume or upgrade to a plan with higher request capacity.
Testing live search
- Publish the page with the Search Bar Script installed.
- Open DevTools and confirm
window.FlowSearchexists. - Type a known page title and confirm live results appear.
- Type a misspelled term and confirm typo tolerance still returns useful pages.
- Submit the query and confirm the configured results page loads.