Search Client Side utility

This uses Lunr.js to perform a client-side search of a site's content.

github location npm version

Usage

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

  1. Dependencies

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

yarn add strip-js striptags node-html-parser

  1. 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

Variants

Loading...
HTML
<form action="/vf-core/components/vf-search-client-side/" method="GET" class="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
  <div class="vf-sidebar__inner">
    <div class="vf-form__item | vf-search__item">
      <label class="vf-form__label vf-u-sr-only | vf-search__label" for="search_query"></label>
      <input type="search" id="search" placeholder="Enter a search query" name="search_query" class="vf-search__input | vf-form__input" data-vf-search-client-side-input data-vf-search-client-side-destination-prefix="">
    </div><button type="submit" class="vf-search__button | vf-button vf-button--primary">
      <span class="vf-button__text">Search</span>

      <svg class="vf-icon vf-icon--search-btn | vf-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140">
        <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
          <path d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z" fill="#FFFFFF" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
        </g>
      </svg>
    </button>
  </div>
</form>
<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>
              

Examples

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

Changelog

2.0.2

2.0.1

  • Changed : Modified the logic to update search term in both the searchboxes (Menu and Current page)
  • https://github.com/visual-framework/vf-core/pull/1859

2.0.0-alpha.2

  • Add customisable URL prefix search_client_destination_prefix.
  • Cleans up typos.
  • https://github.com/visual-framework/vf-core/pull/1602

2.0.0-alpha.1

  • Accessibility: add search_client_id to configure label for and input name attributes.

2.0.0-alpha.0

  • Updates to replace v2.0.0 of vf-search--inline with vf-form--search vf-form--search--responsive

1.0.2

  • Updates to match v2.0.0 of vf-search--inline

1.0.1

  • Fixes CSS to match stylelint rules.
  • https://github.com/visual-framework/vf-core/pull/1405

1.0.0

  • JS linting

1.0.0-alpha.3

  • adds support for autofocus on search input

1.0.0-alpha.2

  • Improve documentation

1.0.0-alpha.1

  • Initial prototype

Assets



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

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

AI Assistant

Welcome! I'm here to help

Try asking me:

Disclaimer: This chatbot is designed to assist you with general information and basic inquiries. See our disclaimer notes.

Review AI generated content for accuracy. Leave feedback.

Close chat and delete conversation?

Are you sure you want to close the chat?
Your current conversation history will be permanently deleted.