Need to add a search to static HTML site

Question

Basically I've got an old static html site ( http://www.brownwatson.co.uk/brochure/page1.html ) I need to add a search box to it to search a folder called /brochure within that folder is html documents and images etc I need the search to find ISBN numbers, Book Reference Numbers, Titles etc.. There's no database the hosting provider has got php I was trying to create something like this:

<div id="contentsearch">
         <form id="searchForm" name="searchForm" method="post" action="search.php">
           <input name="search" type="text" value="search" maxlength="200" />
           <input name="submit" type="submit" value="Search" />
           </form>
         <?php
$dir = "/brochure/";

// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
    while (($file = readdir($dh)) !== false) {
        if($file == $_POST['search']){
            echo('<a href="'.$dir . $file.'">'. $file .'</a>'."\n");
        }
    }
    closedir($dh);
}
}
?>
       </div>

I know, I know this is pretty bad and doesn't work any ideas? I haven't created anything like this in years, and have pretty much just taken bits of code and stuck it together!

Answer 1

There are quite a few solutions available for this. In no particular order:

Free or Open Source

1. Google Custom Search Engine
2. Tapir - hosted service that indexes pages on your RSS feed.
3. Tipue - self hosted javaScript plugin, well documented, includes options for pinned search results.
4. lunr.js - javaScript library.
5. phinde - self hosted php and elasticsearch based search engine

See also http://indieweb.org/search#Software

Subscription (aka paid) Services:

5. Google Site Search
6. Swiftype - offers a free plan for personal sites/blogs.
7. Algolia
8. Amazon Cloud Search

Answer 2

A very, very lazy option (to avoid setting up a Google Custom Search Engine) is to make a form that points at Google with a hidden query element that limits the search to your own site:

<div id="contentsearch">
  <form id="searchForm" name="searchForm" action="http://google.com/search">
    <input name="q" type="text" value="search" maxlength="200" />
    <input name="q" type="hidden" value="site:mysite.com"/>
    <input name="submit" type="submit" value="Search" />
  </form>
</div>

Aside from the laziness, this method gives you a bit more control over the appearance of the search form, compared to a CSE.