尝试使用 typeahead.js 和 php 以及 Ajax 获取 id 和值
Trying to get id and value with typeahead.js and php and Ajax
我正在尝试从数据库中获取国家的 ID 和名称并进行自动完成,当我只想获取名称时它会获取国家的 ID 以便在 db.But 中进一步搜索完美,但是当我也想获得 id 时,一切都不再起作用了。非常感谢您的帮助。
fetch.php
<?php
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
echo 'Connect Error (' . $conn->connect_errno . ') '
. $conn->connect_error;
}
// $conn;
$request = mysqli_real_escape_string($conn,$_POST["query"]);
$sql = "SELECT * FROM countries where name like '".$request."%' ";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$data[] = array('name' => $row["name"] , 'id'=> $row["id"]);
}
echo json_encode($data);
}
?>
index.php
<script>
$(document).ready(function(){
$('#country').typeahead({
source: function(query, result)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data){
result($.map(data, function(item){
return {
id:item.id,
name:item.name
}
}));
}
})
}
select: function (event,ui){
$(this).val(ui.item.name);
$('#idc').val(ui.item.id);
return false;
}
});
});
</script>
<form action="" method="post">
<input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
<input type="hidden" name="idc" value="" id="idc">
<input type="submit" value="submit">
</form>
上面的脚本不起作用,因为我也在尝试获取 ID。
但下面的脚本有效,因为它只显示国家名称。
<script>
$(document).ready(function(){
$('#country').typeahead({
source: function(query, result)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data){
result($.map(data, function(item){
return {
id:item.id,
name:item.name
}
}));
}
})
}
});
});
</script>
请注意,对于上面的脚本,我只是删除了 select:function(event,ui) 并且没有其他任何变化。所以我想这就是问题所在。因为即使我没有更改 return 或其他任何内容,它仍然会显示名称。
非常感谢您的帮助。
我当天就解决了,但是我太忙了,没时间在这里更新结果。
我的错误是我将 jquery 自动完成和预输入结合在一起。
对于我想做的事情 jquery 自动完成功能绰绰有余,这是它的代码
$('#placeautocomplete').autocomplete({
source: "fetch.php",
select: function (event,ui){
$(this).val(ui.item.value)
$('#placeidautoc').val(ui.item.id);
},
minLength: 2,
autoFocus :true,
});
我正在尝试从数据库中获取国家的 ID 和名称并进行自动完成,当我只想获取名称时它会获取国家的 ID 以便在 db.But 中进一步搜索完美,但是当我也想获得 id 时,一切都不再起作用了。非常感谢您的帮助。
fetch.php
<?php
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
echo 'Connect Error (' . $conn->connect_errno . ') '
. $conn->connect_error;
}
// $conn;
$request = mysqli_real_escape_string($conn,$_POST["query"]);
$sql = "SELECT * FROM countries where name like '".$request."%' ";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$data[] = array('name' => $row["name"] , 'id'=> $row["id"]);
}
echo json_encode($data);
}
?>
index.php
<script>
$(document).ready(function(){
$('#country').typeahead({
source: function(query, result)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data){
result($.map(data, function(item){
return {
id:item.id,
name:item.name
}
}));
}
})
}
select: function (event,ui){
$(this).val(ui.item.name);
$('#idc').val(ui.item.id);
return false;
}
});
});
</script>
<form action="" method="post">
<input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
<input type="hidden" name="idc" value="" id="idc">
<input type="submit" value="submit">
</form>
上面的脚本不起作用,因为我也在尝试获取 ID。 但下面的脚本有效,因为它只显示国家名称。
<script>
$(document).ready(function(){
$('#country').typeahead({
source: function(query, result)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data){
result($.map(data, function(item){
return {
id:item.id,
name:item.name
}
}));
}
})
}
});
});
</script>
请注意,对于上面的脚本,我只是删除了 select:function(event,ui) 并且没有其他任何变化。所以我想这就是问题所在。因为即使我没有更改 return 或其他任何内容,它仍然会显示名称。 非常感谢您的帮助。
我当天就解决了,但是我太忙了,没时间在这里更新结果。 我的错误是我将 jquery 自动完成和预输入结合在一起。 对于我想做的事情 jquery 自动完成功能绰绰有余,这是它的代码
$('#placeautocomplete').autocomplete({
source: "fetch.php",
select: function (event,ui){
$(this).val(ui.item.value)
$('#placeidautoc').val(ui.item.id);
},
minLength: 2,
autoFocus :true,
});