如何使我的搜索栏工作

Question

I'm trying to finalise a search bar for my CMS website,

I'm nearly there just my php I think is the main issue,

I have search input

<div class="search">
  <form method="post" action="search.php" class="search" id="search">
    <input id='searchBar' class='search' placeholder="Search for a product" type='text'/>                 
   </form>
</div>

then I have some java script to support on key presses to hopefully filter down items that are currently being displayed on the screen,

 function setSearchListener(){
 var searchBar = document.getElementById('searchBar');
 searchBar.addEventListener('keyup', function(){
 searchBar.addEventListener('focus', runSearchBar(this.value));
 });
}

 function runSearchBar(str){
var oldTarget = document.getElementById('productscontainer');
if(str.length == 0){
console.log('hello');
oldTarget.style.display = 'block';
}
else{
oldTarget.style.display = 'none';
}
var newTarget = document.getElementById('searchTarget');
fetch(newTarget);
}





function fetch(target) {
var xhr, target;
// create a request object
xhr = new XMLHttpRequest();

changeListener = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {

        target.innerHTML = xhr.responseText;
    } else {
        target.innerHTML = "<p>Something went wrong.</p>";
    }
};

xhr.open("GET", "sql/search.php", true);
xhr.onreadystatechange = changeListener;
xhr.send();
console.log(name);
console.log('finding');

};
window.addEventListener('load', setSearchListener());

The javascript side seems to be working all good for me, however im unsure how to set up the php with database interaction side:

here is my search.php

<?php
include("../dbase/config_database.php");    

    $query = "SELECT * FROM products WHERE id LIKE '%".$s."%' OR name LIKE '%".$s."%' OR description LIKE '%".$s."%' ";
    $result = mysqli_query($mysqli, $query);
    $rows = mysqli_fetch_array($result);
    $response = array(
        'id' => $rows ['id'],
        'name' => $rows ['name'],
        'description' => $rows ['description'],
        'price' => $rows ['price'],
        'quantity' => $rows ['quantity']
    );
    echo json_encode($response);
    }
?>

I basically have a page with products displayed, what I would like is when you use the search bar on each keyup say "iphone" it will only display the iphone product(s) on the page and the other products wont be displayed unless the search bar keystrokes are removed.

Answer 1

I see a bug in the JavaScript:

window.addEventListener('load', setSearchListener());

should be

window.addEventListener('load', setSearchListener);

and this is also wrong

searchBar.addEventListener('keyup', function(){
    searchBar.addEventListener('focus', runSearchBar(this.value));
});

Every time a key up event is firing you are attaching another event. Another issue is you are not also attaching the function, but calling the function.

Answer 2

Your code is a mess. This row for example:

xhr.open("GET", "sql/search.php", true);

should be

xhr.open("GET", "sql/search.php?searchstring=" + encodeURIComponent(document.getElementById("searchbar").value), true);

which means, right now you are not sending the search string to search.php.

And in search.php, you're not trying to read the data. To be able to use $s as the search string you need to do $s = $_GET['searchstring']; .

I recommend you to study a Javascript reference of choice and the PHP documentation. And promise me to never put user submitted data into an mysqli_query() call without using mysqli_real_escape_string() on it. It is basic security.

It is too many errors for one SO question. Split it up or go study.