あいまい検索
list2.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>練習</title>
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<form>
<p>
<input type="text" id="key">
<p id="search">検索</p>
</p>
</form>
<ul id="list"></ul>
<script src="list.js"></script>
</body>
</html>
search_api.php
きりだす
<?php
if(!empty($_GET["key"])) {
$flag = true;
$host = "localhost";
$dbname = "lunch";
$dbuser = "root";
$dbpass = "";
$dsn = "mysql:host={$host};dbname={$dbname};charset=utf8";
$pdo = new PDO($dsn, $dbuser, $dbpass);
$sql = "SELECT menu FROM foods WHERE menu LIKE :key";
$stmt = $pdo->prepare($sql);
$stmt->bindValue(":key", "%" . $_GET["key"] . "%", PDO::PARAM_STR);
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($data);
echo $json;
} else {
$flag = false;
}
?>
list.js
$(function() {
$('#search').on('click', function() {
$.ajax({
url: 'search_api.php',
type: 'get',
data: {'key': $('#key').val()},
dataType: 'json',
})
.done(function(d) {
var p = $('#list');
for(var i=0; i<d.length; i++) {
var ele = $('<li>').text(d[i].menu);
p.append(ele);
}
})
.fail(function() {
alert('NG');
});
});
});
