Fuzzy Search

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

Source

Contributors

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.

Teams Fuzzy Search

Search for your favourite Premier League football teams or free type your own.

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

Teams Fuzzy Search

Search for your favourite Premier League football teams. No free typing allowed.

<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-059f9bb4f6.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	Teams Fuzzy Search Search for your favourite Premier League football teams or free type your own. `<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`