Skip to content

Instantly share code, notes, and snippets.

@alex-wilmer
Created December 12, 2016 23:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save alex-wilmer/329ca9450c6fec5610003d5ba8ec6321 to your computer and use it in GitHub Desktop.
Save alex-wilmer/329ca9450c6fec5610003d5ba8ec6321 to your computer and use it in GitHub Desktop.
<html>
<head><title>Fuzzy Search</title>
<script id="algorithm">
// YOUR CODE HERE !
</script>
<script id="data">
const names =
['Brittani Binkley',
'Francine Felix',
'Nestor Nack',
'Catalina Couvillion',
'Emilia Eggleton',
'Lavonda Leduc',
'Abraham Alleman',
'Talisha Tone',
'Melia Marois',
'Toshia Tellier',
'Louann Lashbrook',
'Carlton Corral',
'Freida Faucett',
'Kaley Koehl',
'Kamilah Kearl',
'In Ivery',
'Tisa Taunton',
'Verda Vath',
'Josette Jimmerson',
'Lucilla Leamon',
'Miranda Maclennan',
'Maryjane Minick',
'Delinda Dearborn',
'Kelly Kazmierczak',
'Boris Brundage',
'Joetta Jean',
'Karena Knipp',
'Ferdinand Fay',
'Maud Mcnitt',
'Arianna Arms',
'Thalia Tibbitts',
'Barbara Basden',
'Helga Hockaday',
'Isa Ikard',
'Julianne Jelks',
'Lawanna Longmire',
'Eneida Escoto',
'Julie Jelks',
'Tomasa Tremaine',
'Clinton Chavarria',
'Fabian Frasher',
'Tricia Taff',
'Nila Narducci',
'Adrian Applegate',
'Winona Watford',
'Loise Lambson',
'Jannette Jasmin',
'Geralyn Garibay',
'Lori Lachermeier',
'Antonina Aden',
];
//names generated with http://listofrandomnames.com/index.cfm
</script>
<script id="algoImpentation">
function rearrange() {
//get user input
let user_input = document.getElementById('searchTerm').value.toLowerCase();
let threshold = document.getElementById('threshold').value;
//get list of names in lower case
let data = names.map(e => e.toLowerCase());
//compute distance from input per element
let computed = data.map((element, i) => {
let newRow = [data[i]];
newRow.push(proximity(user_input, newRow[0]));
return newRow;
});
console.log(computed);
//filter out sub-standard matches
let filtered = computed.filter((element) => {
return threshold <= element[element.length -1];
});
//set up sorting function
let sorted = filtered.sort((a,b) => {
return(b[1] - a[1]);
});
//put the first element per list into html
let output = sorted.map((e) => {return e[0];}).join('</li><li>')
//display
document.getElementById('nameList').innerHTML = ('<ol><li>' + output + '</li><ol>');
}
</script>
</head>
<body>
<center>
<h1>Fuzzy Search Demo</h1>
<p>There are 50 names in a list on this page.<br />
Typing into the box will arrange them from closest to farthest to your input.<br />
Typos are encouraged.</p>
<p><input type='text' id='searchTerm' placeholder='type here...' onkeyup="rearrange()"><br />
This numeric value should be between 0 and 1. The higher the number, the stricter the threshold.<br />
<input type='number' id='threshold' value='0.15'>
</p><hr>
<div id='nameList'></div>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment