Живой поиск по имени

Question

Имена картинок из базы данных не появляются, когда я набираю их буквы при вводе формы. Я пытаюсь реализовать живой поиск на моей странице. Я получил базу данных MySql под названием «pinterest» с таблицей «pictures» и столбцом «picture_name» с разными именами изображений. Я хочу, чтобы эти имена появлялись, когда я набираю буквы этого в форме ввода. НИЧЕГО НЕ РАБОТАЕТ: - (

Я получил базу данных MySql, форму php и запрос ajax.

файл: 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(){

    })
  })

файл: 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;
}
```