Matching

by levchenko_d

HTML

<label>
    <input type="text" id="input" placeholder="Start typing..." />
</label>
<ul id="output"></ul>

CSS

b {
    background: #34383e;
    color: white;
    font-weight: 100;
}
/*don't use me*/
 body {
    font-family: courier;
    font-size: 14pt;
    overflow-y: scroll;
}
label, ul {
    display: block;
    width: 40%;
    margin: 25px auto 10px;
    padding: 0;
}
label input, ul li {
    width: 100%;
    list-style-type: none;
}
li:hover b {
    background: #00b0ef;
}
input, li {
    padding: 10px 15px;
    outline-color: #34383e;
    font-family: courier;
}

li:focus{
    background: silver;
}

JavaScript

var words;


var findMatch = function (str, highligth) {

    if (str && words.length) {

        var reg = new RegExp(str, 'gi');
        var res = words.filter(function (word) {
            return reg.test(word)
        });

        if (highligth) {
            return res.map(function (word) {

                return word.replace(str, '<b>'+str+'</b>')

            });
        } else {
            return res;
        }

    }
}


// list

words = ['hypochondriacal',
    'eries',
    'granitization',
    'reaudit',
    'buccinator',
    'colloquialness',
    'daniel',
    'roszak',
    'developable',
    'someway',
    'six',
    'homodont',
    'antimilitarism',
    'strictly',
    'radnorshire',
    'polydisperse',
    'unposed',
    'lger',
    'catechetically',
    'snatchiest',
    'earthwork',
    'sweep',
    'clewiston',
    'sanforise',
    'anchylosis',
    'route',
    'unlengthened',
    'inadaptable',
    'morbifically',
    'souter',
    'eileithyia',
    'wreckfish',
    'boone',
    'nonspillable',
    'pedes',
    'triggerfish',
    'episcopalism',
    'straddlingly',
    'washing',
    'retardant',
    'irishly',
    'methylnaphthalene',
    'palomino',
    'scharwenka',
    'reevacuation',
    'slung',
    'dipsomaniac',
    'miscategorizing',
    'unanalytical',
    'greathearted',
    'singhalese',
    'lockout',
    'undercaptain',
    'nonguilt',
    'argotic',
    'travail',
    'protocol',
    'prosaic',
    'apheresis',
    'outjinx',
    'trisyllable',
    'distil',
    'bpc',
    'autocrat',
    'zirconium',
    'sounding',
    'eau',
    'robber',
    'unallotted',
    'olimbos',
    'peacemaker',
    'bathos',
    'metacinnabarite',
    'kedar',
    'estonian',
    'labourite',
    'harrier',
    'prebeset',
    'ouananiche',
    'semipendent',
    'delicacy',
    'remanifest',
    'crinum',
    'barr',
    'antenna',
    'aggrandized',
    'blacken',
    'shrieve',
    'disceptation',
    'goldarnedest',
    'hematoxylin',
   ...