javascript - 使用jquery和php实时动态搜索MySQL表

Question

我确信有很多文章涵盖了这个主题，但我尝试的每一段代码似乎都不起作用。如果这个问题已经在其他地方得到了回答，很抱歉我找不到它。

我正在尝试创建一个实时搜索，显示表中的所有数据，直到有人开始在输入字段中键入内容。一旦他们开始输入一个键，我想在我的表上运行一个选择查询，以缩小结果范围，如果任何列包含当前正在输入的字符串(有点像谷歌在您输入时开始显示结果)搜索栏)。

我的代码似乎可以正常工作，直到我尝试使用 $.get 或 $.post 与运行 MySQL 搜索的 php 文件进行交互。我对 Web 开发有点陌生，一直在自学，但这个问题已经困扰了我 2 天。这是我目前拥有的代码(尽管我已经尝试了大约 20 个不同的版本):

jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

document.getElementById("search").onkeyup(searchScript());

function searchScript(){

var search = $("#search").val();
if(search==""){
return;
}
else{
$.get("resultspage.php",{search : search},function(result){
$("#results").html(result);
}});
}

</script>
<table id="results">
<?php
<...var assignments storing my db login data...>
$con=mysqli_connect($host,$username,$password,$database);


$sql="SELECT * FROM Registration";

if(mysqli_query($con,$sql)){
$result=mysqli_query($con,$sql);
}
else{
echo "error: " . mysqli_error($con);
}

while($row=mysqli_fetch_array($result))
{
<...code that displays the results...>

?>
</table>

我的 PHP 文件

$search=$_GET['search'];

<...variables storing log in data...>

$con=mysqli_connect($host,$username,$password,$database);


$sql="SELECT * FROM Registration WHERE CONCAT(fName,lName,storeName,numLocations,primaryPhone,secondPhone,email,products) LIKE %$search%";

if(mysqli_query($con,$sql)){
$result=mysqli_query($con,$sql);
}
else{
echo "error: " . mysqli_error($con);
}

while($row=mysqli_fetch_array($result))
{
<...code that displays results....>
}

任何帮助将不胜感激!谢谢。

Answer 1

认识到 jquery 是另一座需要攀登的大山，我仍然会学习和使用它，因为它很简单。从服务器检索数据后，使用 jquery 隐藏不以输入值开头或不包含输入值的值(下面的 .match() )，而不是重复调用服务器。

不知道表的结构，您可以尝试的框架:

$( "#search" ).keyup(function() {
    // Test search letter entry is working 
    alert( "Handler for .keyup() called." );

    var s = $("#search").attr("value");    // Typed in letter
    // Pass an array of table contents
    // there are a couple ways you could approach the 'gathering' of table items...
    $(".individual-item-class").each(function(index, element) {
         if (!element.match(/s/))
             $(element:parent).css("display","none");
         else
             $(element:parent).css("display","table-row")
    }):
});

这段代码不会让你离开地面，而是指向一个方向。

您可以了解selectors和一些 jquery 函数。这里使用的是 each() , attr()和 css() .