php - 实时搜索图片名称

Question

当我在表单的输入中键入其字母时，不会出现来自数据库的图片名称。我正在尝试在我的页面上实现实时搜索。我得到了名为“pinterest”的 MySql 数据库，其中表“图片”和“图片名称”列具有不同的图片名称。当我在表单的输入中键入它的字母时，我希望这些名称出现。没有任何效果:-(

我得到了 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>

文件：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;
}
```

标签： phpmysqlajax