Bootstrap Typeahead

PHP en MySQL autocomplete met Bootstrap Typeahead
<!DOCTYPE html>
<title>Autocomplete Typehead with Ajax PHP</title>
<link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src=""></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
<script src=""></script>
$(document).ready(function() {
hint: true,
highlight: true,
minLength: 2,
maxLength: 10,
maxItem: 10,
source: function(query, result) {
url: "source.php",
method: "POST",
data: {
query: query
dataType: "json",
success: function(data) {
result($.map(data, function(item) {
return item;
<div class="container">
<div class="row">
<form class="col-md-6 py-2">
<div class="input-group">
<input name="songs" id="songs" type="text" class="form-control form-control-no-focus" autocomplete="off" placeholder="Search song title ">
<div class="input-group-append">
<button class="btn btn-secondary btn-no-focus" type="button">
<i class="fa fa-search"></i>

$conn = new mysqli ("server", "user", "password", "database");
$data = array();
$sql = "SELECT song, artist FROM top_100_songs_eu WHERE song LIKE '%".$request."%' OR artist LIKE '%".$request."%' AND list_eu > 21.000 LIMIT 0, 40";
$result = $conn -> query($sql);
while ($row = $result -> fetch_assoc()) {
$data[] = $row["song"].' - '.$row["artist"];
echo json_encode($data);
$conn -> close();

MySQL and PHP Lessons for Beginners
PHP en MySQL autocomplete met Bootstrap