-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
76 lines (63 loc) · 2.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MissPlete: Misspelling-tolerant autocomplete</title>
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400italic|Montserrat'
rel='stylesheet'
type='text/css'>
<link rel="stylesheet" href="website/styles.css" />
</head>
<body>
<main>
<h1>MissPlete</h1>
<h3>
Misspelling-tolerant autocomplete in less than 220 lines of
no-dependencies ECMAScript 2015 (ES6)
</h3>
<p>
MissPlete supports synonyms and it can be customized with any algorithm
to select and sort the completions. By default it uses a
<a href="https://en.wikipedia.org/wiki/Jaro%E2%80%93Winkler_distance">
Jaro–Winkler distance</a> algorithm, which allows for
<a href="https://vimeo.com/28758945#t=11m35s">better sloppy
interaction</a> than the usual completion based on exact substring
matches.
</p>
<h2>Demo</h2>
<input name="country" autocomplete="off" autofocus
placeholder="Country or dependent territory" />
<h2>Usage</h2>
<pre><code>import MissPlete from './MissPlete.js';
new MissPlete({
input: document.querySelector('input[name="city"]'),
// Each subarray contains an option and all its synonyms
options: [["Barcelona", "BCN"], ["San Francisco", "SF"]],
// OPTIONAL
// It must return an object with at least the properties `score` and
// `displayValue`.
// Default is a Jaro–Winkler similarity function.
scoreFn: (inputValue, optionSynonyms) => {
// Crazy random example
const score = Math.random();
return { score: score, displayValue: `${optionSynonyms[0]} (${score})` };
},
// OPTIONAL
// Called for each scored option, in order, starting with the one with the
// greatest score. It's passed the scored option (as returned by scoreFn)
// and its index in the score-sorted list. It must return the <li> node
// to display, or null if nothing else has to be displayed.
// Default returns <li> nodes for the 8 best-scored options.
listItemFn: (scoredOption, itemIndex) => {
const li = scoredOption.score < 0.5 ? null : document.createElement("li");
li && li.appendChild(document.createTextNode(scoredOption.displayValue));
return li;
}
});
</code></pre>
<h2><a href="https://github.com/xavi/miss-plete">Source</a></h2>
</main>
<script src="website/bundle.js"></script>
</body>
</html>