Live Динамический поиск таблицы MySQL с использованием jquery и php

Question

Я уверен, что существует ряд статей, посвященных этой теме, но каждый фрагмент кода, который я пытаюсь сделать, похоже, не работает. Если это уже было дано в другом месте, мне жаль, что я не смог его найти.

Я пытаюсь создать живой поиск, который отображает все данные в моей таблице, пока кто-то не начнет вводить поле ввода. Как только они начнут вводить ключ, я хочу запустить запрос select в моей таблице, чтобы сузить результаты, если какой-либо из столбцов содержит введенную в настоящее время строку (вроде того, как google начинает показывать результаты при вводе панель поиска).

Мой код, кажется, работает до тех пор, пока я не попытаюсь использовать либо $ .get, либо $ .post для взаимодействия с моим файлом php, который запускает поиск MySQL. Я отчасти новичок в веб-разработке и участвую в этом, когда я иду, но это уже два дня беспокоило меня. Вот код, который я в настоящее время (хотя я пробовал около 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().