Javascript search bar

Question

I designed this really nice search box for a site that I'm building. However, I don't know how to get the search bar to work and actually display content. Below you can find the Html and CSS files for that particular section of my site:

.searchbox{
    /*defining width of form element*/
    width:350px;
    /*centering the form element*/
    margin-top: 200px;
    margin-left: 250px;
    margin-bottom: 370px;
}

input[type="search"]{
    padding:10px 15px 10px 50px;
    font-size:36px;
    color:#4D4D4D;
    /*removing border from search box*/
    border:none;
    /*defining background image as a search symbol*/
    background-image:url(img/search-btn.png);
    background-repeat:no-repeat;
    /*background-size*/
    -webkit-background-size:35px 35px;
    -moz-background-size:35px 35px;
    -o-background-size:35px 35px;
    background-size:35px 35px;
    /*positioning background image*/
    background-position:8px 12px;
    /*changing background color form white*/
    background-color:#C6E2FF;
}
 
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder{
    color:#0276FD;
}
input[type="search"]:-moz-placeholder { /* Firefox 18- */
    color: #0276FD;
}
input[type="search"]::-moz-placeholder { /* Firefox 19+ */
    color: #0276FD;
}
input[type="search"]:-ms-input-placeholder { /* interner explorer*/
    color: #0276FD;
}

form.searchbox a{
    display:block;
    /*removing underlines from anchor element*/
    text-decoration:none; 
    color:#1f5350;
    font-size:30px;
    background-color:#C6E2FF;
    padding:10px;
}

form.searchbox ul{
     width:465px;
    /*removing predefined bullet points from list*/
     list-style:none;
    /*removing padding from list items*/
    padding:0;
}

form.searchbox ul li{
    margin-bottom:10px;
}

/*adding effect when the mouse is hovered over list item*/
.searchbox ul li a:hover{
    color:#395D33;
    background:#8CDD81;
}

/*moving it slightly toward right when hovered*/
.searchbox ul li:hover{
    /*transform*/
    -webkit-transform:translateX(20px);
    -moz-transform:translateX(20px);
    -ms-transform:translateX(20px);
    -o-transform:translateX(20px);
    transform:translateX(20px);
}

/*now first we will hide the suggestion list*/
.suggestions li{
    overflow:hidden;
    height:0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}

/*and make the suggestion reappear when user focus on search field*/
input[type="search"]:focus + .suggestions li{
    height:63px;
}

<section class="searcharea">
    <div class="wrapper">
        <form class="searchbox" action="Resources.html" target="_NEW">
            <input type="search" placeholder="search.." />
            <ul class="suggestions">
                <li><a href="What is palliative  care.html">What is palliative ca...</a></li>
                <li><a href="Who needs palliative care.html">Who needs palliative ca...</a></li>
                <li><a href="Talking about palliative care.html">Talking about palliative ca...</a></li>
                <li><a href="How to interact with providers.html">how to interact with providers...</a></li>
                <li><a href="Resources">Resourc...</a></li>
            </ul>
        </form>
    </div>
</section>

Please help. I don't want to use PHP for this as I am not familiar with creating a database or anything.

Answer 1

If I understood you well, you want to display one of the contents from your suggestions on your page? Then I'd say this:

<section class="searcharea">
<div class="wrapper">
        <form class="searchbox" action="Resources.html" target="_NEW" action="get">
            <select id="page" placeholder="search.." />
                    <option value="What is palliative  care.html">What is palliative ca...</option>
                    <option value="Who needs palliative care.html">Who needs palliative ca...</option>
                    <option value="Talking about palliative care.html">Talking about palliative ca...</option>
                    <option value="How to interact with providers.html">how to interact with providers...</option>
                    <option value="Resources">Resourc...</option>
            </select>
        </form>
    </div>
</section>

For the Resources page I say, use PHP, it's quite straightforward piece of code, but if you really do NOT want server-side, maybe you can get the GET parameters somehow with JS also, but with php:

<?php
     header( 'Location: '.$_GET['page'].' ) ;
?>