EvoToolkit - v3.7.2 (Changelog)

Fuzzy Search

Fuzzy search variant of the input component. Uses a simplified version of the Levenshtein distance string metric to generate matches.

Related Readings

Source

Contributors

Luke Harrison
  • Overview
  • Options
  • Methods
  • Theming

Base

Standard

Allows you to free type an input value, and the dropdown provides matches which you may or may not decide to select.

When a value is selected, in addition to the input, it also appears in the data-value data attribute on the top level block component.

<div class="c-input c-input--fuzzy-search js-fuzzy">
	<label class="c-input__label" for="fuzzy-field">Teams Fuzzy Search</label>
	<div class="c-input__wrapper">
		<input id="fuzzy-field" name="fuzzy" class="c-input__field" autocomplete="off" required />
		<div class="c-input__dropdown">
			<ul></ul>
		</div>
	</div>
	<div class='c-input__text'>Search for your favourite Premier League football teams or free type your own.</div>
</div>

No Free Typing

Only allows you to select values which are present in the fuzzy search dropdown.

<div class="c-input c-input--fuzzy-search u-mb-regular js-fuzzy">
	<label class="c-input__label" for="dropdown-field">Teams Fuzzy Search</label>
	<div class="c-input__wrapper">
		<input type="text" name="fuzzy2" class="c-input__hidden-field" required />
		<div class="c-input__dummy" tabindex="0"></div>
		<svg class='c-input__arrow'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#arrow" /></svg>
		<div class="c-input__dropdown">
			<div class="c-input__dropdown-box">
				<input class="c-input__dropdown-field" autocomplete="off" />
			</div>
			<ul></ul>
		</div>
	</div>
	<div class='c-input__text'>Search for your favourite Premier League football teams. No free typing allowed.</div>
</div>

You can modify the fuzzy search component by overriding certain JavaScript functionality through HTML data-attributes.

JavaScript

You can modify fuzzy search component functionality by adding the below data attribute. Unless stated otherwise, these must be placed on the top level block component (eg:- c-calendar)

Name
Name data-input-fuzzy-disable-highlight
Description
Description

Disable the highlight over matches by adding the data-input-fuzzy-disable-highlight attribute.

Default
Example
Example
<div class="c-input c-input--fuzzy-search js-fuzzy" data-input-fuzzy-disable-highlight>
	<label class="c-input__label" for="fuzzy-field">Teams Fuzzy Search</label>
	<div class="c-input__wrapper">
		<input id="fuzzy-field" name="fuzzy" class="c-input__field" autocomplete="off" required />
		<div class="c-input__dropdown">
			<ul></ul>
		</div>
	</div>
	<div class='c-input__text'>Search for your favourite Premier League football teams or free type your own.</div>
</div>

This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.

See JavaScript API for more information and a list of shared, global methods.

setData

You can pass an array or key/value object directly to the fuzzy search to use as a data source, or you can pass it an API endpoint and it'll grab it from there.


												evo('.js-fuzzy').inputFuzzySearch('setData', {
	source: [
		'foo',
		'bar'
	]
})

evo('.js-fuzzy').inputFuzzySearch('setData', {
	source: {
		foo: 'bar'
	}
})

evo('.js-fuzzy').inputFuzzySearch('setData', {
	source: 'https://www.my-api-end-point.com'
})

											

You can theme the fuzzy search component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-input-focus-color primary
$component-input-border-color light
$component-input-disabled-background-color very-light
$component-input-box-color very-light
$component-input-disabled-text-color light
$component-input-calendar-box-border-color primary