Skip to content

Commit 3150c22

Browse files
authored
docs: add recipes for accent-insensitive filtering and <mark> highlights (#899)
Refs #893. Covers both requests without new options: a custom lookupFilter that folds diacritics, and a wrapper around the default formatResult that swaps <strong> for <mark>.
1 parent ae299ef commit 3150c22

1 file changed

Lines changed: 29 additions & 0 deletions

File tree

‎readme.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,21 @@ A suggestion is an object of the form `{ value: string, data: any }`. `data`
8383
is passed through untouched to `formatResult`, `onSelect`, and the grouping
8484
key resolver.
8585

86+
To match regardless of accents (so `cafe` finds `Café`), pass a custom
87+
`lookupFilter` that strips diacritics from both sides:
88+
89+
```js
90+
const fold = (text) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
91+
92+
$('#autocomplete').devbridgeAutocomplete({
93+
lookup: countries,
94+
lookupFilter: (suggestion, query) => fold(suggestion.value).includes(fold(query)),
95+
});
96+
```
97+
98+
The default `formatResult` still highlights only exact (case-insensitive)
99+
matches, so an accent-folded match is listed but not highlighted.
100+
86101
### Ajax-only settings
87102

88103
| Setting | Default | Description |
@@ -212,6 +227,20 @@ Minimal CSS to get started:
212227
`cursor: pointer` on `.autocomplete-suggestion` is required for tap-to-select
213228
to fire on mobile Safari — see issue #542.
214229

230+
To highlight matches with a different element, e.g. `<mark>`, wrap the
231+
default formatter. It escapes everything except its own `<strong>` tags, so
232+
swapping the tag is safe:
233+
234+
```js
235+
$('#autocomplete').devbridgeAutocomplete({
236+
lookup: countries,
237+
formatResult: (suggestion, currentValue) =>
238+
$.Autocomplete.defaults
239+
.formatResult(suggestion, currentValue)
240+
.replace(/<(\/?)strong>/g, '<$1mark>'),
241+
});
242+
```
243+
215244
## Response format
216245

217246
The server must respond with JSON in this shape:

0 commit comments

Comments
 (0)