How do I highlight matching search text?

Question

I've got this JavaScript search function that searches through a list. I'd like the matching text to be bold. I've seen this strip of code, but as I'm very new to JavaScript i'm not sure how to implement it into my existing function.

var highlightHTMLStart = '<span class="highlight">';
    var highlightHTMLEnd = '</span>';
    elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

my JS function:

function search() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";

        } else {
            li[i].style.display = "none";
        }
    }
}

my html

<div id="SearchInput" class="container">

    <input class="w3-input w3-padding" type = "text" id = "myInput" onkeyup = "search()" onblur = "abortSearch()">

            <ul style="max-height: 350px; overflow: hidden;" class="w3-ul w3-margin-top" id="myUL">
                <?php include 'search_list.php'; ?>
            </ul>
      </div>

Possible duplicate of [In Javascript, how can i perform a global replace on string with a variable inside '/' and '/g'?](http://stackoverflow.com/questions/542232/in-javascript-how-can-i-perform-a-global-replace-on-string-with-a-variable-insi) — Robiseb, Oct 12 '16 at 20:36

How do I highlight matching search text?

0 Answers0