I am trying to integrate the following code:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
Please enter your Suburb:
<input type="text" name="location_input" id="location_input">
Tutor:<select name="locations" id="locations">
</select>
<script>
$("#location_input").keyup(function(){
const location = $("#location_input").val();
$("#locations").html(''); //reset dropdown
// do ajax call to get locations
$.ajax({
url: 'search.php', //replace this with your route of the search function
data: {location}, //pass location as body data
success: function(data) {
let res = JSON.parse(data);
res.forEach(function(el) { //loop over the json response
let option = `<option id=${el.id} value=${el.name}>${el.name}</option>`
$("#locations").append(option); //append locations to select dropdown
});
},
error: function(err) { //error functions
console.log(err);
alert("Error")
}
});
});
</script>
</body>
</html>
Search.php:
$conn = new mysqli($servername, $username, $password, $db_name);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// echo "Connected successfully";
// print_r($_GET["location"]);
$location = $_GET["location"];
$result = $conn->query("select id, name, Location_tags from tutor_location where Location_tags LIKE '%". $location ."%'");
$locations = [];
while ($row = $result->fetch_assoc()) {
$locations[] = $row;
// echo $row["Name"];
}
echo json_encode($locations);
?>
into my easy!appointments module for when a user selects a provider. I want the user to enter in his suburb and it must show providers based on that location. In the database, I have a field called location_tags where the provider specifies which suburbs he would like to go to.
The code where I am trying to integrate is in here:
<div class="form-group" id="selectprovider">
<label for="select-provider">
<strong><?= lang('select_provider') ?></strong>
</label>
<select id="select-provider" class="col-xs-12 col-sm-4 form-control"></select>
</div>
This is in the Easy!appointments module made by Alex Tselegidis How do I integrate this? Link to Easy!appointments