I've created autocomplete function but it doesn't work. I see no error and can't find out what's wrong...
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Metamorphous">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src ="scripts.js"></script>
</head>
<body>
<div id="container">
<div id="main" class="down">
<header>
<h1>HerbariuM</h1>
</header>
<nav>
<input id="searchBar" type="text" placeholder="Szukaj..." onfocus="mainUp()" onblur="mainDown()">
</nav>
</div>
<div id="herb" class="hide">
<img id="image" src="">
<h2><i>Losowa roślinka</i></h2>
</div>
</div>
</body>
</html>
Here's just a fragment of code for autocomplete JS:
$(document).ready(function(){
$("#searchBar").autocomplete({
source: function(request,response){
$.ajax({
url: "search.php",
dataType:"json",
data:{q:request.term},
success: function(data){
response(data);
}
});
},
minLength: 2,
select: function(event,ui){
alert("Selected: "+ui.item.label);
}
});
});
And this is PHP code to return data from database PHP:
<?php
$connection = new mysqli("localhost","root","password","herbarium");
$herb = $_GET['q'];
$result = $connection->query("SELECT * FROM herbs WHERE latin_name LIKE '%$herb%'");
$data = array();
while ($row=$result->fetch_assoc()){
$data[] = $row['latin_name'];
}
echo json_encode($data);
?>
Could anyone advice me how to fix it? Got no idea, have searched whole internet and all lines of code one by one but see no error...
Fixed... The problem was using 'localhost' instead of '127.0.0.1' on my Mac. Came on it accidently, while trying to create new .php file and access it by webbrowser.