Question

我正在尝试为我的CMS网站完成搜索栏，

我差不多只是我的php我认为是主要问题，

我有搜索输入

<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>

然后我有一些java脚本支持按键，希望能够过滤掉当前显示在屏幕上的项目，

 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());

javascript方似乎对我有用，但我不确定如何设置php与数据库交互方：

这是我的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);
    }
?>

我基本上有一个显示产品的页面，我想要的是当你在每个键盘上使用搜索栏时说“iphone”它只显示页面上的iphone产品而其他产品不会显示除非删除搜索栏击键。

Answer 1

我在JavaScript中看到了一个错误：

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

应该是

window.addEventListener('load', setSearchListener);

这也是错误的

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

每次按键事件发生时，您都会附加另一个事件。另一个问题是你不是附加函数，而是调用函数。

Answer 2

你的代码很乱。这一行例如：

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

应该是

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

这意味着，现在您没有将搜索字符串发送到search.php。

在search.php中，您并未尝试读取数据。为了能够使用$s作为搜索字符串，您需要执行$s = $_GET['searchstring'];。

我建议您学习选择的Javascript参考和PHP文档。并且保证我永远不会将用户提交的数据放入mysqli_query()来电而不使用mysqli_real_escape_string()。这是基本的安全。

一个SO问题的错误太多了。拆分或继续学习。

如何让我的搜索栏工作

2 个答案: