带有单选按钮过滤的 PHP + MYSQL 即时搜索

Question

我在本指南 https://www.youtube.com/watch?v=_AqM9U3mi9A 的帮助下创建了一个有效的搜索表单，该表单使用 PHP 和 MYSQL 显示即时搜索结果（无需按下提交按钮）。

然后我想根据按下的单选按钮过滤搜索结果。现在我也得到了这个工作（部分是在本指南https://www.youtube.com/watch?v=DVS4qoB98U8 的帮助下），但仅在我的搜索表单上按提交时。由于某种原因，它不适用于即时搜索结果，这是我的问题。

index.php（表格）：

<form class="form-custom" role="search" action="index.php" method="POST">
   <div class="form-group">
      <label for="all" class="radio-btn">
         <input id="all" class="radio-custom" type="radio" name="searchfilter" value="all" checked="checked"> ALL
      </label>
      <label for="sports" class="radio-btn">
         <input id="sports" class="radio-custom" type="radio" name="searchfilter" value="sports"> SPORTS
      </label>
      <label for="e-sports" class="radio-btn">
         <input id="e-sports" class="radio-custom" type="radio" name="searchfilter" value="e-sports"> E-SPORTS
      </label>
      <label for="show-business" class="radio-btn">
         <input id="show-business" class="radio-custom" type="radio" name="searchfilter" value="show-business"> SHOW BUSINESS
      </label>
   </div>
      <div class="form-group">
      <input type="text" name="search" autocomplete="off" class="form-control form-control-custom" placeholder="Search..." onkeyup="searchq();">
      <button type="submit" name="submit" value="" class="btn btn-default btn-form-custom">Submit</button>
      </div>
</form>

<div class="test" id="output">

<!-- this is where instant search results are supposed to appear -->

</div>

index.php（jquery - 需要即时搜索结果才能工作）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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>

search.php（PHP 代码）：

<?php

include_once("connect.php");

$output = '';


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

$searchq = $_POST['searchVal'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);

if($_POST['searchfilter'] == "all") {

    $sqlCommand = "(SELECT  * FROM sports WHERE Title LIKE '%$searchq%') UNION (SELECT  * FROM e_sports WHERE Title LIKE '%$searchq%') UNION (SELECT  * FROM show_business WHERE Title LIKE '%$searchq%')";

} else if($_POST['searchfilter'] == "sports") {

        $sqlCommand = "SELECT * FROM sports WHERE Title LIKE '%$searchq%'";

} else if($_POST['searchfilter'] == "e-sports") {

        $sqlCommand = "SELECT  * FROM e_sports WHERE Title LIKE '%$searchq%'";

} else if($_POST['searchfilter'] == "show-business") {

        $sqlCommand = "SELECT  * FROM show_business WHERE Title LIKE '%$searchq%'";

} 

$query = mysql_query($sqlCommand) or die(mysql_error());
$count = mysql_num_rows($query);

if($count == 0){
     $output .= '<p class="p-nof">No results found</p>';
    }else{
    $output .= '<ul ="dropdown">';
    $output .= '<p>Search results: '.$count.'</p>';
        while($row = mysql_fetch_array($query)){
        $title = $row['Title'];
        $url = $row['url'];
        $id = $row['id'];

            $output .= '<a class="searchresult" href="'.$url.'"><li> '.$title.'</li></a>';
       }
    $output .= '</ul>';
   }
}
echo($output); 

?>

提前感谢您的帮助！

编辑：

我将 javascript 更改为以下内容：

<script type="text/javascript">
function searchq(){
var searchTxt = $("input[name='search']").val();
var searchFilter = $("input[name='searchfilter']").val();

$.post("search.php",{searchVal: searchTxt, searchfilterVal: searchFilter}, function(output){
    $("#output").html(output);

});
}
</script>

通过此更改，即时搜索结果可以像以前一样工作，但单选按钮过滤不起作用。似乎它只使用来自第一个无线电输入的数据而忽略了其余部分。当我单击其他单选按钮时，它会继续使用表单中第一个列出的数据。当我点击时它不会改变。

我仍然需要这方面的帮助！提前致谢！

Answer 1

调整你的 JS 以发布 searchFilter 的值

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function searchq(){
var searchTxt = $("input[name='search']").val();
var searchFilter = $("input[name='searchfilter']").val();

$.post("search.php",{searchVal: searchTxt, searchFilter: searchfilter}, function(output){
        $("#output").html(output);

});
}
</script>