Good afternoon,
I am looking to add a live search to my site.
My JS / HTML code is:
<script>
var form = document.getElementById('keywordForm');
form.addEventListener('submit',function(e) {
var search = form.keyword.value;
var xhr = new XMLHttpRequest();
xhr.open("GET","keywordsearch.php?search="+search,true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.response;
}
};
e.preventDefault();
});
</script>
<form id="keywordForm">
<input id="keyword" type="text" />
<input type="submit" value="Search"/>
</form>
And my PHP for the other page is:
<?php
if(isset($_GET['search'])) {
$search = $_GET['search'];
include 'dbconnect.php';
//Include code that connects to the database
$result = mysqli_query($con, "Select * FROM pixs WHERE search=$search" );
$keywords = array();
while ($keywords = mysqli_fetch_array($result)) {
$keywords[] = $keyword['keyword'];
}
echo json_encode($keywords);
}
?>
I can't even get it to refresh on the first when I click on the search button.
Any advice / tips / examples would be amazing!