Search Client Side

This uses Lunr.js to perform a client-side search of a site's content. This is recommended only for sites with a limited number of pages.

HTML

<div class="vf-grid">
  <form action="/vf-core/components/vf-search-client-side/" method="GET" class="vf-form | vf-search vf-search--inline">
    <div class="vf-form__item | vf-search__item">
      <input type="search" id="search" placeholder="Enter a search query" name="search_query" class="vf-form__input | vf-search__input" data-vf-search-client-side-input>
    </div><button type="submit" class="vf-search__button | vf-button vf-button--primary">
      Search
    </button>
  </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.8/lunr.js"></script>
<script src="/search_index.js"></script>
<div class="vf-search-client-side vf-grid | vf-content">
  <div class="results-container" data-vf-search-client-side-results>
    Loading...
  </div>
</div>

<script type="text/javascript">
  window.onload = function() {
    vfSearchClientSide();
  };
</script>

Usage

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

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

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 paramaters (boost score) to the JS
customising the output format
NJK template has hardcoded paths for vf-core

Building a search index

Index making code

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);

Dependencies

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

yarn add strip-js striptags node-html-parser

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

Installation info

This repository is distributed with npm. After installing npm, you can install vf-search-client-side with this command.

$ yarn add --dev @visual-framework/vf-search-client-side

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-search-client-side/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

1.0.23

small change to cards on homepage

1.0.18

dependency bump

1.0.17

dependency bump

1.0.16

dependency bump

1.0.13

dependency bump
adds roamap and consultation docs

1.0.12

design token documenation now lives in the component libary

1.0.7

adds updates blog

1.0.6

begin to make more pattern/boilerplate guidance
minor templating updates

1.0.5

dependency bump

1.0.4

uses vf-favicon
adds meta attributes

1.0.3

run vf-component-assets:everything on local dev
remove reference to removed /css/app.css

1.0.2

Add 404
Fix component CSS generation

1.0.1

Also generate per-component CSS with vf-css:generate-component-css

1.0.0

Initial release to be used with vf-core 2.2.0

Assets

File system location: components/vf-search-client-side

Find an issue on this page? Propose a change or discuss it.