Search Client Side utility

This approach is recommended only for sites with a limited number of pages (around 500 or fewer), otherwise the client side search index can become many megabytes in size.

If your site is in a subdirectory or has other requirements, you specify any required prefix to your search URL with data-vf-search-client-side-destination-prefix="https://myprefix".

Warning: Early alpha, lot's of "to do"s

This is an early alpha. More customisation options need to be added, such as:

• passing search parameters (boost score) to the JS
• customising the output format
• NJK template has hardcoded paths for vf-core

Supplying a search index

This consumes a .js file with a searchIndex object of pages, a la:

let searchIndex = {
  "pages": [
    {"id":"0", "title": "Page title", "text": "Body text of page goes here", "tags": "", "url": "/index.html"},
    ...
  ]
};

To make this index, you can utilise the ability of vf-extension to generate a search index.

1. Making an index

To generate that JS file, if you're using a vf-eleventy based site, you may also want to make use of the vf-extensions's gulp-build-search-index.js:

require('./node_modules/\@visual-framework/vf-extensions/utils/gulp-build-search-index.js')(gulp, path, buildDestionation);

2. Dependencies

If you use that JS you'll also need some npm dependencies:

yarn add strip-js striptags node-html-parser

3. Tell gulp to make the index

And you should build that search index after updating your html pages, a la:

  // build search index after search page is compiled
  gulp.watch(['./build/search/index.html'], gulp.parallel('vf-build-search-index'));

  // And for your `build` task
  gulp.task('build', gulp.series(
    ...
    'eleventy:build',
    'vf-build-search-index',
    ...
  ));

  // And for your `dev` task
  gulp.task('dev', gulp.series(
    ...
    'eleventy:build',
    'vf-build-search-index',
    ...
  ));

Using search

• You can pass a query to the search page with ?search_query=myQuery
• The search will live update as the user enters text
• You can enable autofocus on the search element, but should only do so if most users intend to search on the page