How to make search results display as a drop down list in a search bar

HTML & CSS
21

Did you mean 3 “words” or 3 “characters” in the search bar?

I took the liberty of combining the HTML and CSS in one file and changing the container for the returned results from an HTML <table> tag to a <div> with the CSS property {display:table}.

I’m not sure what the next step should be, but it sounds like you were trying to write the PHP code so it would not return any results until at least 3 search terms (?) had been entered into the search field. If that is correct, then we need to move this thread into the PHP forum where knowledgeable PHP help can be found. Please let us know.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>search</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
@charset "utf-8";
/* CSS Document */
.searchbar input[type="text"] {
    border:1px solid black;
    /*border:0 none;*/
    font:16px Helvetica Neue, Helvetica, Arial,lucida grande, tahoma, verdana, arial, sans-serif;
    color:#777;
    width: 35%;
    height:32px;
    margin:2.6% 0 0 20px;
    padding:0 0 0 10px;
}
.test {
    display:table;
    border:1px solid black;
    padding:0px;
    margin:0 0 0 20px;
}
ul { 
    list-style:none;
    width:448px;
    margin:0px;
    padding:0px;
}
ul a.searchresult {text-decoration:none;}   
ul li {
    text-align:left;
    padding-left:5px;
    font: 16px Helvetica Neue, Helvetica, Arial,lucida grande, tahoma, verdana, arial, sans-serif;
    color: #777;
}
ul li:hover {background-color:#CCC;}
    </style>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function searchq(){
    var searchTxt = $("input[name='search']").val();
    $.post("search.php",{searchVal: searchTxt}, function(output){
        $("#output").html(output);
    });
}
</script>
</head>

<body>
    <div class="searchbar">
        <form action="index.php" method="post">
        <input type="text" name="search" size="40" placeholder="Search Authors / Books"  onkeyup="searchq();"/>
        <!--<input type="submit" value=">>"  /> -->
        </form>
    </div>
<!-- start container for the Search output -->
    <div class="test" id="output">
    </div>
<!-- end container for the Search output -->
  
</body>
</html>

I would think that it would be more efficient for JavaScript to filter for more than 3 words/characters in the search field before querying PHP.