JavaScript Search bar to display results after user input

I have a webpage that displays a list of my local files, and I have a search bar that goes through the list of files and highlights the first match.

However, how can I display the files only when a user searches for a filename. So instead of all the files showing, I'd only like the files that match the search criteria to be returned.

PHP, JavaScript, jQuery is totally an option here if anyone can help in that area.

testexec.php:

<?php
$path = '/var/www/html/'; //get list of files
$files = scandir($path);

//display the links

foreach($files as $file) {
     if($file != '.' && $file != '..') {
        echo '<div><a href="readfile.php?file='.urlencode($file).'"> '.$file.'</a></div>';
     }
}

?>

readfile.php:

<?php
 // PHP script to allow the file to be downloaded
$filename = $_GET['file'];

if (file_exists($filename)) {
  header('Content-Description: File Transfer');
  header('Content-Type: application/octet-stream');
  header('Content-Disposition: attachment; 
filename="'.basename($filename).'"');
  header('Expires: 0');
  header('Cache-Control: must-revalidate');
  header('Pragma: public');
  header('Content-Length: ' . filesize($file));
  readfile($filename);
  exit;
 }
 ?>

    //JavaScript for searchbar

     function FindNext() {
     var str = document.getElementById ("livesearch").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }
     var supported = false;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = true;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            } else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }

                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }

            if (supported) {
                if (!found) {
                    alert ("The following text was not found:\n" + str);
                }
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }