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

HTML & CSS
1

hey guys can u help me edit this code.
i want to make the search results display as drop down from the search bar, similar to what google does.
here is my code.


<?php
mysql_connect("localhost","root","") or die("could not connect");
mysql_select_db("test") or die("could not find database");
$output = '';

//collect
if (isset($_POST['searchVal']) && trim($_POST['searchVal'])!='') {

	$searchq = $_POST['searchVal'];
	$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);
	
	$query = mysql_query("SELECT * FROM authors WHERE fname LIKE '%$searchq%' OR lname LIKE '%$searchq%'") or die("could not search");
	$count = mysql_num_rows($query);
	if($count == 0){
		 $output = 'there was no search result!';
		}else{
			while($row = mysql_fetch_array($query)){
			   $firstname = $row['fname'];
			   $lastname  = $row['lname'];
			
			    $output .= '<div> '.$firstname.' '.$lastname.' </div>';
		   }
		
	   }
	}
echo($output);	

?>

Thanks

2

What is the problem with that code?

3

the code works just fine,
currently it outputs the data from the database in this manner.

how can i make the output display as dropdown list .
just like the google search bar can u help me with the code.

thnx.

4

I think that has more to do with HTML/CSS , I’m going to move the thread in the CSS forum for now, let’s hope someone will be able to help you.

5

I think you are looking for form objects <select> and <option>

https://www.google.com/search?q=forms+select+option&rlz=1C1CHFX_enUS576US576&oq=forms+select+&aqs=chrome.1.69i57j0l5.10948j0j7&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8

6

yes thanks that helped, i got one more step closer.

7

hello again a little more help plz, how can i make the results display in a tabular form
each output in a different row, i know we can do this by using <tr> and <td>, i am not able to do that.


if($count == 0){
		 $output = 'there was no search result!';
		}else{
			while($row = mysql_fetch_array($query)){
			   $firstname = $row['fname'];
			   $lastname  = $row['lname'];
			
			    $output .= '<table>'.$firstname.' '.$lastname.' </table>';
		   }
		
	   }
	}
echo($output);
8

If $count is != 0 it will throw an undefined

table tags should at least have row and cell tags too.

If you don’t want a series of tables put the table tags outside of the while and the row and cell tags inside it.

9 

if($count == 0){
		 $output = 'there was no search result!';
		}else{
		$output = '<select name ="dropdown">';
			while($row = mysql_fetch_array($query)){
			
			
//			   $firstname = $row['fname'];
//			   $lastname  = $row['lname'];
			  
			    $output .= '<option>'.$row['fname'].' '.$row['lname'].' </option>';
		   }
		$output .= '</select>';
	   }
	}
echo($output);
10

Thank u very much , not exactly what i wanted to do ,
but i got the basic idea.

cheers.

11

sorry to bother you guys again , i hate myself for doing this but i have now where else to go.
i tried to use the code provided by lauren, but i failed to do make it work like i wanted.

tried to use <table> tag but the results are displaying in a single row Continuously , i want to display each output in a different row
that i can make links .

help me with the code please.

12

Please post the portion of the code you’re trying now.

13

i am using the same code give by lauren , but i want to use tabes instead of <options> tags to display each individual output in a seprate row.

14

Why not display each row in a list item <li> instead of in a <td> which is necessarily within a <tr> ? Using tables in the manner that you wish has not been recommended for over 15 years. Just curious.

15

i have just started learning php and will use whatever you guys recommend, so can you edit the code above and and help me display the results withn a <li>
or <td> which ever is good according to you.

16

paulsnider11,

Have you written an HTML page that contains a search field?

And are you trying to make the returned data from the search display as a list of items in a box beneath the search field (or somewhere on the page)?

If yes to those questions, please click the link at the bottom of my post and read our guidelines for posting code. We ask that you post a standalone working page that demonstrates the issue or second choice post a link to the actual page. A standalone page is one that starts with a doctype and ends with </html>. It is a page that we can open in our browsers.

The snippits of HTML and CSS that you have been posting tell us nothing useful. They do not tie together. If you can present the page to us, we may be able to help. Otherwise, we are just guessing, and guessing gets old. We need something more tangible to work with. PHP is not our thing here. We work with HTML and CSS. We need to see that code to know how the page is supposed to look and work.

Please click the link at the bottom of my post and read our posting guidelines.

17

Sorry for that , i will keep that in mind.
Thankfully My problem is finally solved, Thanks to all of you for being so kind and helpfull.

18

Would you be kind enough to share with us the details of how you solved it? Others may benefit from your experience. I’m sure that I would. :slight_smile:

19

i used the code provided by lauren( can’t thank him enough) , than ronpat provided a good solution to use the unordered list to display the results.
this is the final result if anyone in the future wants to make a search bar for their website

the index.html file


<!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" />
<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>
 
 <!--container for the Search output -->
 <table class="test" id="output">
 </table>
 <!--container for the Search output -->
  
</body>
</html>

The php code


<?php
mysql_connect("localhost","root","") or die("could not connect");
mysql_select_db("bookreserve") or die("could not find database");
$output = '';

//collect
if (isset($_POST['searchVal']) && trim($_POST['searchVal'])!='' && strlen('searchVal') > 3){

	$searchq = $_POST['searchVal'];
	$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);
//query	
	$query = mysql_query("SELECT  * FROM authors WHERE name LIKE '%$searchq%'") or die("could not search");
	$count = mysql_num_rows($query);
	if($count == 0){
         $output = 'there was no search result!';
        }else{
        $output = '<ul ="dropdown">';
            while($row = mysql_fetch_array($query)){
            
              
                $output .= '<a class="searchresult" href="#"><li> '.$row['name'].'</li></a>';
           }
        $output .= '</ul>';
       }
    }
echo($output); 
mysql_close();
?>

This is the 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{
    margin:0 0 0 20px;
    padding:0px;
	border:1px solid black;}

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;}
20

thank you guys, but can u guys help make the search bar more efficient currently the results are not displayed exactly as i want them to there is still more things that i need to do

i want to display results only after three words have been entered in the search bar , i tried using strlen() without any sucess.

plz assist.