我有一个正确填充 Twitter Typeahead 的输入文本。在这种情况下，我想从选择框中选择一个值，并使用与所选下拉列表值相关的值填充输入文本。我发现了关于我的疑问的类似问题，但不幸的是我没有得到解决这个问题的正确方法：动态填充 Twitter Bootstrap TypeaheadTwitter bootstrap Typeahead 填充hrefjQuery Autocomplete / Twitter Typeahead 填充多个字段下面的代码显示了一个选择框，该框填充了 php 代码和一个输入文本，该文本填充了 Twitter TypeAhead 脚本：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"><!-- CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> </head><body><div class="container"><br><h1>DYNAMIC TWITTER TYPEAHEAD</h1><br><div class="row"><?php // Include the database config file include_once 'dbConfig.php'; // Fetch all the category data $query = "SELECT * FROM categories ORDER BY category ASC"; $result = $db->query($query); ?><!-- category dropdown --><div class="col-md-4"><select id="categoryFK" name="categoryFK" class="form-control"> <option value="">Select category</option> <?php if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo '<option value="'.$row['categoryID'].'">'.$row['category'].'</option>'; } }else{ echo '<option value="">Category not available</option>'; } ?></select></div><div class="col-md-4"><input type="text" name="products" id="products" class="form-control input-lg" autocomplete="off" placeholder="" /></div></div></div></body></html>
1 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
我设法解决了这个问题。以下是我修改以适应我的项目的脚本：
AJAX
<script type="text/javascript">
var products;
$ ( function ()
{
$('#categoryFK').on('change', function(){
var queryID = $(this).val();
$.ajax({
url:"fetch.php",
method:"POST",
data: {
category: queryID
},
dataType:"json",
success:function(data)
{
$("#products").val ('');
products = data;
}
});
});
$('#products').typeahead({
source: function ( query, result )
{
result ( $.map(products, function (item)
{
return item;
}
));
}
});
});
</script>
和 PHP 脚本 ( fetch.php )
<?php
include 'dbConfig.php';
if ( isset ( $_POST [ 'category' ] ) ) {
$request = $db->real_escape_string($_POST["category"]);
$query = "
SELECT * FROM products WHERE categoryFK = ".$request."
";
$result = $db->query($query);
$data = array ();
if ( $result->num_rows > 0 )
{
while($row = $result->fetch_assoc ())
{
$data[]=$row["productName"];
}
echo json_encode($data);
}
}
?>
现在，通过这些修改，我可以在“类别”选择框中选择一个选项，然后在输入文本中输入与所选选项相关的所有值:)
- 1 回答
- 0 关注
- 130 浏览
添加回答
举报
0/150
提交
取消