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>

PHP + MYSQL即时搜索，带有单选按钮过滤功能

1 个答案: