根據位置標簽填充下拉列表
[英]Populate Dropdown based on location tags
問題描述
我有一個數據庫，其中有一列名為location_tags ，我試圖做的是允許用戶輸入他們的位置，下拉列表應該只填充具有匹配位置標簽的用戶，而不顯示那些不'沒有位置標簽。 這是我的桌子。
<?php
$conn = new mysqli('localhost', 'root', '', 'tutors')
or die ('Cannot connect to db');
$result = $conn->query("select id,name,Location_tags from tutor_location");
?>
<html>
<body>
<input type="text" name="location_input" id="location_input">
<select name="locations" id="locations">
<script>
$("#location_input").keydown(function(){
const location = $("#location_input").val();
$("#locations").hmlt(''); //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
dataType: 'json' //expect a json response back
success: function(data) {
data.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>
<select name='id'>
<?php
while ($row = $result->fetch_assoc()) {
unset($id, $name);
$id = $row['id'];
$name = $row['name'];
echo '<option value="'.$id.'">'.$name.'</option>';
}
?>
</select>
</body>
</html>
和我的 search.php 代碼：
<?php
function SearchLocations() {
$conn = new mysqli('localhost', 'root', '', 'tutors') or die ('Cannot connect to db');
$result = $conn->query("select * from tutor_location where Location_tags LIKE ='%". $_GET['location']."%'");
$locations = [];
while ($row = $result->fetch_assoc()) {
$locations[] = $row;
}
return json_encode($locations);
}
?>
因此，例如，如果一個人在Mayfair那么只有數據庫中的第一個人應該顯示在下拉列表中，我面臨的問題是所有項目都被顯示而不是基於位置，它沒有顯示在落下
1 個解決方案
解決方案1
1 已采納 2019-01-16 10:24:04
您可以在單獨的 PHP 文件中構建您的搜索功能，以獲得干凈的 URL 路由。 請注意，此查詢將容易受到 SQL 注入。 這只是一個一般的例子
例如
// search.php
// GET request
function SearchLocations() {
$conn = new mysqli('localhost', 'root', '', 'tutors') or die ('Cannot connect to db');
$result = $conn->query("select id,name,Location_tags from tutor_location where Location_tags='%". $_GET['location']."%'");
$locations = [];
while ($row = $result->fetch_assoc()) {
$locations[] = $row;
}
return json_encode($locations);
}
網址：
<input type="text" name="location_input" id="location_input">
<select name="locations" id="locations">
然后在你的 javascript 代碼中：
$("#location_input").keydown(function(){
const location = $("#location_input").val();
$("#locations").hmlt(''); //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
dataType: 'json' //expect a json response back
success: function(data) {
data.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")
}
});
});
根據選擇填充下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.