Skip to main content

Search

The search functionality on the Learning Lab site is implemented using a combination of a page template, JavaScript scripts, and a JSON data file. The search page uses the template page-search.php, the javascript search library fuse.js and the script file js/search.js to perform searches. Additionally, js/search-home.js redirects users to page-search.php and sends the search query from the home page.

Data Source

Searching relies on a JSON file named pages.json, which represents all the content on the site. This file can be generated using the process described in publishing the Learning Lab.

page-search.php

This file contains the markup for the search form and displays a listing of all keywords used across the Learning Lab.

Keyword Display

  • Retrieval: The script retrieves all terms from the "keyword" taxonomy, ordering them alphabetically and excluding any terms with no associated content.
  • Display: Keywords are displayed in alphabetical sections, with each keyword linked to its archive page.
  • Filtering: Keywords named "Documentation" and "Archive" are excluded from the display. Additionally, only keywords associated with posts that do not have the "Archive" term are shown.

search.js

This script handles the search logic and interaction.

Configuration

Several variables are declared as options for the search:

  • threshold: Set to 0.4, controlling how closely results need to match the query.
  • distance: Set to 1200, defining the maximum allowable distance between the query and result.
  • mySearchLocation: Set to 0, indicating the starting point within the text for the search.
  • useExtendedSearch: Set to false, determining whether to use an extended search method.
  • minMatchCharLength: Set to 4, specifying the minimum characters required for a match.

These parameters can be adjusted for testing by adding debug=true to the URL query string.

Data Fetching

The script fetches data from pages.json using the Fetch API, expecting a JSON response that is parsed for use.

performSearch Function

  • Execution: Triggered by clicking the searchButton, pressing enter in the searchInput box, or through a query string variable (query=search-term).
  • Variable Setup: Initialises search parameters, which can be overridden via a debug panel.
  • Search Execution: If the input box is not blank, the search is performed using the fuse.js library, examining title and content.
  • Result Display:
    • Clears Previous Results: Empties the results element to prepare for new results.
    • Updates Results Counter: Adjusts the results-counter element to reflect the number of results found.
    • Displays Results: Iterates through each result, displaying the title (linked to the page) and a snippet of content.
    • Keyword Filtering: Filters out results with keywords "documentation," "archive," or "redirect."
    • Animation: The class collapse is added to results, animating their reveal. If the search is initiated via the query string, the collapse class is removed and the results are just displayed without any animation.
    • Query string: any query string is removed once results are displayed.

Keywords