DIY Autocomplete.

Search text with given input and highlight letters.

by noyb

HTML

<input placeholder="Search Me" id="box" type="text" />
<ul class="navList">
    <li>apples</li>
    <li>apricots</li>
    <li>acai</li>
    <li>blueberry</li>
    <li>bananas</li>
    <li>cherry</li>
    <li>coconut</li>
    <li>donut</li>
    <li>durean</li>
</ul>

JavaScript

$('#box').keyup(function () {
    var valThis = this.value.toLowerCase(),
        lenght  = this.value.length;

    $('.navList>li').each(function () {
        var text  = $(this).text(),
            textL = text.toLowerCase(),
            htmlR = '<b>' + text.substr(0, lenght) + '</b>' + text.substr(lenght);
        (textL.indexOf(valThis) == 0) ? $(this).html(htmlR).show() : $(this).hide();
    });

});