Search bar

jelmerketelaar · September 11, 2019, 9:44am

<!DOCTYPE html>
<html>
<head>
	<title>GCW-Shop Winefinder</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="shopbg"> 

<img class="gcw" src="https://www.grandcruwijnen.nl/skin/frontend/grandcru/default/images/skin/logo.png">

	       <div class="container">
                <div class="searchbar">
                    <div class="form-group "> 
                    	<div class="icons"></div>
                    		<i class="fa fa-search"></i>

   <input type="search" id="myInput" onkeyup="myFunction()" placeholder="Search.." class="bar" style="width:588px; height:44px; outline:none;" class="form-control">
                           
                    </div>
                </div>
            </div>
        </div>
    </div>


<?php

$search = null;
if (isset($_GET['search'])){
	$search = $_GET['search'];
}   

// If file exists and file is older than 4 hours; remove it and get the latest feed
if (file_exists('feed.xml')){
	$x = 14400;  //4 hours

	$currentTime = time();

	//timestamp
	$creationTime = filemtime('feed.xml');

	//extract difference
	$difference = $currentTime - $creationTime;

	//if difference = $x...then delete file
	if ($difference >= $x) {
		unlink('feed.xml');

		saveXML('https://www.grandcruwijnen.nl/feeds/inhouse_wineshop.xml', 'feed.xml');
	}
}else{
	saveXML('https://www.grandcruwijnen.nl/feeds/inhouse_wineshop.xml', 'feed.xml');
}


$xml = new DOMDocument();
$xml->load('feed.xml');
$rss = $xml->getElementsByTagName('rss');
$channel = $rss[0]->getElementsByTagName('channel');
$items = $channel[0]->getElementsByTagName('item');
?>


 <!-- input tag -->
      
    <!-- ordered list -->
    <ul class='grid'> 
      <?php
foreach ($items as $product) {
	$name 		 = $product->getElementsByTagName('wine-name')[0]->nodeValue;
	$ean 		 = $product->getElementsByTagName('ean')[0]->nodeValue;
	$stock 		 = $product->getElementsByTagName('stock')[0]->nodeValue;
	$price 		 = $product->getElementsByTagName('price')[0]->nodeValue;
	$description = $product->getElementsByTagName('description')[0]->nodeValue;
	$location	 = $product->getElementsByTagName('location')[0]->nodeValue;	
    $image 		 = $product->getElementsByTagName('images')[0]->nodeValue;
    
	if ($search === null || strpos(strtolower($name), strtolower($search)) !== false){
        ?>
        
  		<li class="list-group-item">
<div>
		<img class="wine"><?php echo '<p><img src='.$image.' height="80"; "width="80" ;> </p>';?> </img>

  		<h5> <?php echo $name; ?> </h5>

        <h6>€ <?php echo $price; ?> </h6>

        <p class="location"> <?php echo $location; ?></p>
        <p class="Voorraad"> Voorraad: <?php echo $stock?> item(s)</p>
		
	    <button class="button" type="button">i</button>


  			</div>


		</li>


<?php

	}
}

?>
    </ul> 
      
 
</body> 
  
</html> 





<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


<?php
function saveXML($url, $file) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    $result = curl_exec($ch);
    curl_close($ch);

    file_put_contents($file, $result);
} 
?>

This is my html code
I would like to have a working search bar. But idk what i have to do

m_hutley · September 11, 2019, 11:14am

You’ve… already done it?

EDIT: Oh, i see. What you’ve done is put an input in, but not put any form tag, or the javascript to power it.

Your PHP code is complete; what you don’t have is the HTML submission part of the equation. Wrap a <form> around your input, give it the correct parameters and a way to submit the search, and it should work.

jelmerketelaar · September 11, 2019, 6:54pm

For some reason it still does not work. What am I doing wrong?

<!DOCTYPE html>
<html>
<head>
	<title>GCW-Shop Winefinder</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="javascript/searchbar.js"></script>

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="shopbg"> 

<img class="gcw" src="https://www.grandcruwijnen.nl/skin/frontend/grandcru/default/images/skin/logo.png">

	       <div class="container">
                <div class="searchbar">
                    <div class="form-group "> 
                    	<div class="search-bar">
<form>
   <input type="search-input" id="myInput" placeholder="Search..." class="bar" 
   style="width:588px; height:44px; outline:none;" class="form-control"> 

                           
                    </div>
                </div>
            </div>
        </div>
</form>

<script>
  
  function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementByClassName('bar');
  filter = input.value.toUpperCase();
  ul = document.getElementByClassName("grid");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("")[0]; 
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

</script>
<?php

$search = null;
if (isset($_GET['search'])){
	$search = $_GET['search'];
}   

// If file exists and file is older than 4 hours; remove it and get the latest feed
if (file_exists('feed.xml')){
	$x = 14400;  //4 hours

	$currentTime = time();

	//timestamp
	$creationTime = filemtime('feed.xml');

	//extract difference
	$difference = $currentTime - $creationTime;

	//if difference = $x...then delete file
	if ($difference >= $x) {
		unlink('feed.xml');

		saveXML('https://www.grandcruwijnen.nl/feeds/inhouse_wineshop.xml', 'feed.xml');
	}
}else{
	saveXML('https://www.grandcruwijnen.nl/feeds/inhouse_wineshop.xml', 'feed.xml');
}


$xml = new DOMDocument();
$xml->load('feed.xml');
$rss = $xml->getElementsByTagName('rss');
$channel = $rss[0]->getElementsByTagName('channel');
$items = $channel[0]->getElementsByTagName('item');
?>

      
    <!-- ordered list -->
    <ul class='grid'> 
      <?php
foreach ($items as $product) {
	$name 		 = $product->getElementsByTagName('wine-name')[0]->nodeValue;
	$ean 		 = $product->getElementsByTagName('ean')[0]->nodeValue;
	$stock 		 = $product->getElementsByTagName('stock')[0]->nodeValue;
	$price 		 = $product->getElementsByTagName('price')[0]->nodeValue;
	$description = $product->getElementsByTagName('description')[0]->nodeValue;
	$location	 = $product->getElementsByTagName('location')[0]->nodeValue;	
    $image 		 = $product->getElementsByTagName('images')[0]->nodeValue;
    
	if ($search === null || strpos(strtolower($name), strtolower($search)) !== false){
        ?>
  		<li class="list-group-item">
<div>
		<img class="wine"><?php echo '<p><img src='.$image.' height="80"; "width="80" ;> </p>';?> </img>

  		<h5> <?php echo $name; ?> </h5>

        <h6>€ <?php echo $price; ?> </h6>

        <p class="location"> <?php echo $location; ?></p>
        <p class="Voorraad"> Voorraad: <?php echo $stock?> item(s)</p>
		
  <!-- Trigger/Open The Modal -->
<button id="myBtn">i</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>


</div>


            
  			</div>


		</li>


<?php

	}
}

?>
    </ul> 
      
 
</body> 
  
</html> 





<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


<?php
function saveXML($url, $file) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    $result = curl_exec($ch);
    curl_close($ch);

    file_put_contents($file, $result);
} 
?>

etidd · September 12, 2019, 5:56am

I may be wrong, but doesn’t the form need a method like GET or POST ? You just have <form>.

Also, I’m thinking you can use a name attribute for the input with the class of “bar”.

When you put alert(input); or Window.alert(input) in the JS, does it return the right string the from the search bar?

chorn · September 12, 2019, 6:37am

The default method is GET, you don’t have to write this, just have it in mind, but i’m more a friend of explicit naming it. And as action should be empty if you submit to the same URL, you can omit it, so <form> is the most basic value.

chorn · September 12, 2019, 6:41am

I still don’t know what that should mean, what actions you did, what you expect these actions to do and what really happened and what you tried to find the problem yourself.

droopsnoot · September 12, 2019, 8:23am

What causes myFunction() to execute and actually filter the results? Other than its definition, I can’t see any reference to it.

If you’re expecting to get the value from your <input> tag in this code:

if (isset($_GET['search'])){
	$search = $_GET['search'];

you’ll have to set the name attribute on the input

<input type="search-input" id="myInput" placeholder="Search..." class="bar" 
   style="width:588px; height:44px; outline:none;" class="form-control">

unless you’ve got some JS code somewhere that handles submitting the form to run the search.

WebMachine · September 12, 2019, 11:08am

You should validate your HTML also. You have some nesting issues where you open some div tags before the form but close them inside the form.

system · December 12, 2019, 6:22pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.