如何根据选择框值填充 Twitter Typeahead？
我有一个正确填充 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回答
-
蝴蝶不菲
我设法解决了这个问题。以下是我修改以适应我的项目的脚本：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 )<?phpinclude '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); }}?>现在，通过这些修改，我可以在“类别”选择框中选择一个选项，然后在输入文本中输入与所选选项相关的所有值:)
随时随地看视频慕课网APP
PHP