This article explains how to implement an AJAX-based live search with the tools included in the Barebones theme.

Basics

To implement the live search, use the search.js plugin.

The plugin requires jQuery to function properly.To add jQuery to a page, use the {SupportScripts} tag.

The default theme includes jQuery by default.

The plugin can be found in the default theme's file /scripts/plugins/search.js.

The search layout can be defined in the file /styles/scss/modules/_search.scss.

Once the plugin has been initialized in the theme, it will automatically track the search terms entered in the selected search field, perform searches automatically as AJAX requests and display the live search's results in connection with the search field.

The plugin includes hook functions containing JavaScript code executed in connection to pre-defined events. The hooks are further discussed in the next chapter.

Hook functions

All hooks included in the plugin are listed below. These have already been initialized in the file /scripts/custom.js.

beforeUpdate()

Performed before the search result list is updated.

afterUpdate()

Performed after the search result list has been updated.

If you'd like to add your own actions connected to hook-tracked events to the theme, add your own code inside the hook functions.

The hooks' content is determined when the plugin is initialized. See the next chapter for instructions.

Initializing the plugin

The search plugin is initialized in the following way:

new MCF.Search({
	$searchForm: $('#LiveSearch'),

	beforeUpdate: function ($elem) {
		MCF.Loaders.show($elem);
	},

	afterUpdate: function ($elem) {
		MCF.Loaders.hide($elem);
	}
});

In the example, the loaders.js plugin is used to display a loading overlay over the search result list while search results are being updated.

The $searchForm parameter is given as its value the search field's form as a jQuery object. In the default theme, this is the website's main search field.