Js - regular matching Array and String

Question

First post, so be gentle, please ;D

code:

var matchString;
var searchString = '';
var lastKey;
function keyDown(e) {
  if (!e)
    e = window.e;
    for (var i=0; i<asciiNum.length;i++){
        if (e.keyCode == asciiNum[i]){
            console.log('asciiLet: '+asciiLet[i]);
            lastKey = asciiLet[i];
            searchString +=lastKey;
        }else if(e.keyCode == "27"){
            searchString="";
            console.log(searchsrtring)
        }
    }
}

function keyUp(e) {
    console.log('left: '+searchString)
    for (var i=0; i<champArray.length; i++){
    }

}

The Array:

var nameArray = ["aatrox","ahri","akali","alistar","amumu","anivia","annie","ashe", "blitzcrank",   "brand",    "caitlyn",  "cassiopeia",   "cho'gath", "corki",    "darius",   "diana",    "draven",   "dr. mundo",    "elise",    "evelynn",  "ezreal",   "fiddlesticks", "fiora",    "fizz", "galio",    "gangplank",    "garen",    "gragas",   "graves",   "hecarim",  "heimerdinger", "irelia",   "janna",    "jarvan iv",    "jax",  "jayce",    "karma",    "karthus",  "kassadin", "katarina", "kayle",    "kennen",   "kha'zix",  "kog'maw",  "leblanc",  "lee sin",  "leona",    "lissandra",    "lucian",   "lulu", "lux",  "malphite", "malzahar", "maokai",   "master yi",    "m.fortune",    "mordekaiser",  "morgana",  "nami", "nasus",    "nautilus", "nidalee",  "nocturne", "nunu", "olaf", "orianna",  "pantheon", "poppy",    "quinn",    "rammus",   "renekton", "rengar",   "riven",    "rumble",   "ryze", "sejuani",  "shaco",    "shen", "shyvana",  "singed",   "sion", "sivir",    "skarner",  "sona", "soraka",   "swain",    "syndra",   "talon",    "taric",    "teemo",    "thresh",   "tristana", "trundle",  "tryndamere",   "twitch",   "twisted fate", "udyr", "urgot",    "varus",    "vayne",    "veigar",   "vi",   "viktor",   "vladimir", "volibear", "warwick",  "wukong",   "xerath",   "xin zhao", "yorick",   "zac",  "zed",  "ziggs",    "zilean",   "zyra", "jinx"];
    var asciiNum = ['27','65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90']
    var asciiLet=  ['Esc','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']

so, what do i want to do: I want to match the content of searchstring with the nameArray in fact of every pressed key. In the end every element who is not beginning with fe "A" should fadeOut. Hope you all can understand my broken english and will take pity on me (:

Answer 1

You could do this

1. Add the keyDown callback to the input (I assume it is an HTMLInputElement )

2. In the keyDown callback delay the call to searchNameFromInput function so that the value of the input has already change when you check it.

3. Filter elements in nameArray by creating a regex that checks for matches of names with your input value from the beginning (for instance: "an" would match "anivia" and "annie" )

The code looks like this

var nameArray = ["aatrox","ahri","akali","alistar","amumu","anivia","annie","ashe", "blitzcrank",   "brand",    "caitlyn",  "cassiopeia",   "cho'gath", "corki",    "darius",   "diana",    "draven",   "dr. mundo",    "elise",    "evelynn",  "ezreal",   "fiddlesticks", "fiora",    "fizz", "galio",    "gangplank",    "garen",    "gragas",   "graves",   "hecarim",  "heimerdinger", "irelia",   "janna",    "jarvan iv",    "jax",  "jayce",    "karma",    "karthus",  "kassadin", "katarina", "kayle",    "kennen",   "kha'zix",  "kog'maw",  "leblanc",  "lee sin",  "leona",    "lissandra",    "lucian",   "lulu", "lux",  "malphite", "malzahar", "maokai",   "master yi",    "m.fortune",    "mordekaiser",  "morgana",  "nami", "nasus",    "nautilus", "nidalee",  "nocturne", "nunu", "olaf", "orianna",  "pantheon", "poppy",    "quinn",    "rammus",   "renekton", "rengar",   "riven",    "rumble",   "ryze", "sejuani",  "shaco",    "shen", "shyvana",  "singed",   "sion", "sivir",    "skarner",  "sona", "soraka",   "swain",    "syndra",   "talon",    "taric",    "teemo",    "thresh",   "tristana", "trundle",  "tryndamere",   "twitch",   "twisted fate", "udyr", "urgot",    "varus",    "vayne",    "veigar",   "vi",   "viktor",   "vladimir", "volibear", "warwick",  "wukong",   "xerath",   "xin zhao", "yorick",   "zac",  "zed",  "ziggs",    "zilean",   "zyra", "jinx"],
input = document.getElementById('foo');

// I also assume IE9+ for addEventListener
input.addEventListener('keydown', function keyDown(e) {
    e = e || window.event;
    // just bind the input element as a parameter
    // for the function searchNameFromInput
    setTimeout(searchNameFromInput.bind(null, e.target||e.srcElement), 80);
}, false);

function searchNameFromInput(input) {
    if (input.value.length) {
         console.log(
            nameArray.filter(function (name) {
                return new RegExp('^' + input.value).test(name);
            })
        );
    }
}