Javascript 搜索栏

Question

我为我正在构建的网站设计了这个非常漂亮的搜索框。但是，我不知道如何让搜索栏工作并实际显示内容。您可以在下面找到我网站特定部分的 Html 和 CSS 文件:

.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>

请帮忙。我不想为此使用 PHP，因为我不熟悉创建数据库或任何东西。

Answer 1

如果我理解你的意思，你想在你的页面上显示你建议的内容之一吗？那么我会这样说:

<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>

对于我所说的资源页面，使用 PHP，这是一段非常简单的代码，但如果你真的不想服务器端，也许你也可以通过 JS 以某种方式获取 GET 参数，但使用 php:

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