JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

<script src="http://lavancier.com/brockCharts/flashcards/fuzzy-match-algorithm.js"></script>
<input></input>
<div class='container'> <span></span>

</div>

CSS

@import"http://fonts.googleapis.com/css?family=Roboto:400,100,300,500";
 input {
    width: 150px;
    height: 40px;
    background-color: rgba(20, 20, 20, 0.4);
    border: none;
    outline: none;
    font-family: Roboto, Helvetica Neue, sans-serif;
    font-weight: 100;
    color: white;
    transition: all 1s ease;
    text-align: center;
    font-size: 16pt;
    margin: 0 auto;
    display: block;
}
input:hover {
    color: orange;
    background-color: rgba(20, 20, 20, 0.7);
}
body {
    font-family: Roboto, Helvetica Neue, Sans-Serif;
    font-weight: 100;
    font-size: 12pt;
    text-align: center;
    background-image: url('http://www.lavancier.com/whitenoise.png');
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.container {
    width: 130px;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;
    background-color: rgba(20, 20, 20, 0.1);
    text-align: left;
}
.bold {
    font-weight: 400;
}

JavaScript

function formatString(string) {
    string = string.replace(/\.|\?|"|'|-|!|,/g, "");
    return string.toLowerCase();
} // this takes an object part and formats it.

$("input").on("input", function () {
    $("span").html('');
    key = $("input").val();

    array = ["Tokyo", "Seoul", "Shanghai", "Delhi", "Mexico City", "Beijing", "São Paulo", "Mumbai", "Jakarta", "New York", "Keihanshin", "Cairo", "Kolkata", "Bangkok", "İstanbul", "London", "Los Angeles", "Buenos Aires", "Dhaka", "Paris", "Rio de Janeiro", "Manila", "Rhine-Ruhr", "Lima", "Chicago", "Bogotá", "Nagoya", "Chennai", "Bangalore", "Tehran", "Milan", "Hyderabad", "Hong Kong", "Dallas–Fort Worth", "Santiago", "Madrid", "Ahmedabad", "Houston", "Philadelphia", "Toronto", "Washington, D.C.", "Miami", "Atlanta", "Barcelona", "Singapore", "Munich", "Stuttgart", "Ankara", "Berlin", "Hamburg", "Pune", "Sydney", "Melbourne", "Mysore", "Izmir"];

    results = [];
    for (n = 0; n < array.length; n++) {
        temp_holder = stringMatch(formatString(key), formatString(array[n]));
        if (temp_holder > 3) {
            results[n] = temp_holder.toPrecision(1);
        }
    }

    prediction_obj = {};

    for (x = 0; x < array.length; x++) {
        prediction_obj[results[x]] = array[x];
    }
        
    for (var key in prediction_obj) {
        temp_holder = $("span").html();
        if (isNaN(key) === false) {
            $("span").html(temp_holder + "<span class='bold'>" + prediction_obj[key] + "</span>" + ": " + Number(key).toPrecision(2) + "<br>");
        }
    }

});