Docs/Live Search

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

  1. Publish the page with the Search Bar Script installed.
  2. Open DevTools and confirm window.FlowSearch exists.
  3. Type a known page title and confirm live results appear.
  4. Type a misspelled term and confirm typo tolerance still returns useful pages.
  5. Submit the query and confirm the configured results page loads.

Next steps