The names of picture from database do not appear when I'm typing its letters in the input of my form. I'm trying to implement the live search on my page. I got MySql database called 'pinterest' with table 'pictures' and 'picture_name' column with different names of picture. I want these names to appear when I'm typing letters of it in the input of my form. NOTHING WORKS :-(
I got MySql Database, php form and ajax request.
file : search.php:
require_once __DIR__.'/connect.php';
?>
<form id="frmSearch" method="post" action="search.php">
<label>Pickup location <br>
<input type="text" name="txtSearchPictureName" id="txtSearchPictureName" placeholder="Search.." list="searchList" required>
<datalist id="searchList"></datalist>
</label>
</form>
<script src="search.js"></script>
file : search.js
$('#txtSearchPictureName').on('input', function(val){
$.ajax({
method : "GET",
url : 'apis/api-search-picture.php?txtSearchPictureName='+val.target.value,
cache: false,
dataType:"JSON"
}).
done( function(jData){
$('#searchList').empty()
jData.forEach(x => {
$('#searchList').append('<option value="' + x.picture_name + '"></option>')
})
}).
fail( function(){
})
})
file: api-search-picture.php
<?php
//connection do db
require_once __DIR__.'/connect.php';
$sPictureName = $_GET['txtSearchPictureName'];
try{
$stmt = $db->prepare('SELECT picture_name FROM pictures WHERE picture_name LIKE :sPictureName ');
$stmt->bindValue(':sPictureName', "%$sPictureName%");
$stmt->execute();
$aRows = $stmt->fetchAll();
echo json_encode($aRows);
} catch(PDOEXception $ex){
echo $ex;
}
```