SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

    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. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    What is the problem with that code?

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the code works just fine,
    currently it outputs the data from the database in this manner.

    Capture2.PNG

    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. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,500
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    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. #5
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you are looking for form objects <select> and <option>

    https://www.google.com/search?q=form...sm=93&ie=UTF-8
    What I lack in acuracy I make up for in misteaks

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lorenw View Post
    I think you are looking for form objects <select> and <option>
    yes thanks that helped, i got one more step closer.

  7. #7
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    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. #8
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,169
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    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. #9
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,100
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    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); 
    What I lack in acuracy I make up for in misteaks

  10. #10
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank u very much , not exactly what i wanted to do ,
    but i got the basic idea.

    cheers.

  11. #11
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,169
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Please post the portion of the code you're trying now.

  13. #13
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #15
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    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. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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. #17
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by paulsnider11 View Post
    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.
    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.

  19. #19
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <!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

    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
    Code:
    @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. #20
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by paulsnider11 View Post
    i want to display results only after three words have been entered in the search bar , i tried using strlen() without any sucess
    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.
    Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •