Skip to content

Latest commit

 

History

History
55 lines (40 loc) · 2.62 KB

README.md

File metadata and controls

55 lines (40 loc) · 2.62 KB

JSearch

A drop-in search widget for static sites

JSearch literally scrapes a target URL, matches internal links in the response's markup and uses it as a data source to match a keyword/phrase.

Matching is done by using Levenshtein distance. At the moment, this is done as a 'best of [x]' rather than mean average.

Usage

Include JSearch as an external JS library:

<script async src="/path/to/jsearch.js"></script>

and initialise with:

window.jsearch.init();

OR you can pass in a configuration object:

window.jsearch.init({
  'src': 'http://www.mywebsite.com',
  'src_el': '#link_list'
});

where src is the URL of the page to scrape and src_el is the narrowest possible scope to query from the scraped document, as a CSS selector for a container element.

Configuration options

The options you can pass in are:

Key Type Description Default value Example value
src string URL to the resource to be queried, be it the home page or sitemap.xml or whatever window.origin 'http://mywebsite.com/archive'
src_el string CSS selector string matching the element that contains nodes relevant to your search query. This is determined automatically for RSS/Atom feeds and sitemaps (though not for XML generally speaking). documentElement '#element'
append_to string CSS selector matching the element to which the search widget should be attached. 'body' '.wrapper'
attrs array Array of strings corresponding to the names of the attributes you want to check. This is handled automatically if querying RSS, Atom or sitemap. A node's textContent is checked automatically. ['href', 'title'] ['href', 'title', 'data-info']
cache number hours to cache search index 72 24

So, if you had:

  • a list of blog article links on an archive page
  • and the containing element of that list had an id of blog_list
  • you wanted to append the search widget to a width-constraining element with an id of wrapper
  • you wanted to check href, title and data-summary attributes
  • you wanted to disable caching for testing purposes

then you would init like so:

window.jsearch.init({
  'src': 'http://www.myblog.com/archive',
  'src_el': '#blog_list',
  'append_to': '#wrapper',
  'attrs': ['href', 'title', 'data-summary'],
  'cache': 0
});

A note on performance

Obviously, the fewer nodes and attributes JSearch has to look through, the faster it will be, so if you can try to provide a src_el element if you're scraping a web page.