实时搜索picture_name

Question

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;
}
```