Created
December 12, 2016 23:28
-
-
Save alex-wilmer/329ca9450c6fec5610003d5ba8ec6321 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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