如何使用取决于 html 选择框中选定值的 php 创建 Jquery 自动完成输入？

Question

我正在开发一个页面，其中包含一个选择框（类别）和一个自动完成输入（产品）。 在这种情况下，我想根据下拉列表（类别）中的选定值获取自动完成输入以加载值，使用户能够根据下拉列表中的选定值将值键入到自动完成输入中。

例如，如果我在下拉列表中选择一个名为“shoes”的值，则与该值相关的值将通过输入自动完成（产品）加载，其中仅允许用户将基于所选值的相关值键入下拉列表（类别）中。

我发现了一些关于这个疑问的类似问题，但不幸的是我没有找到改善这个问题的正确方法：

下面，我展示了下拉列表和自动完成输入工作正常的代码：


<body>

<div class="container">
<br>
<form method="post">
<div class="row">
<div class="col-md-4">
    <label>Select Category</label>

<?php

include 'db.php';
$stmt = $connection->prepare('SELECT * FROM categories');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<select name="categoryFK" id="categoryFK" class="form-control">
  <?php foreach($results as $row): ?>
    <option value="<?= $row['categoryID']; ?>"><?= $row['category']; ?></option>  
<?php endforeach ?>
</select>

</div>

<div class="col-md-4">
    <label>Type Product</label>
    <input type="text" class="form-control" id="products"/>
</div>
<div class="col-md-4">        
    <input type="submit" class="btn btn-success btn-block" name="submit" value="SUBMIT"/>
</div>
</form>

</div>
</div>

<script>
$(function() {
    $("#products").autocomplete({
        source: "search.php",
    });
});
</script>

</body>

下面是使自动完成输入工作的 php 脚本：


<?php 
// Database configuration 
$dbHost     = "localhost"; 
$dbUsername = "root"; 
$dbPassword = ""; 
$dbName     = "test"; 

// Create database connection 
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 

// Check connection 
if ($db->connect_error) { 
    die("Connection failed: " . $db->connect_error); 
} 

// Get search term 
$searchTerm = $_GET['term']; 

// Fetch matched data from the database 
$query = $db->query("SELECT * FROM products WHERE productName LIKE '%".$searchTerm."%'"); 

// Generate array with skills data 
$productData = array(); 
if($query->num_rows > 0){ 
    while($row = $query->fetch_assoc()){ 
        $data['productID'] = $row['productID']; 
        $data['value'] = $row['productName']; 
        array_push($productData, $data); 
    } 
} 

// Return results as json encoded array 
echo json_encode($productData); 
?>

如上所述，下拉列表和自动完成输入都工作得很好，但我想知道如何改进上面的代码以使自动完成输入与选定的下拉列表值相关？

Answer 1

尝试这个

    $("#products").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: 'search.php',
                dataType: "json",
                data: {
                    term : request.term,
                    category : $( "#categoryFK option:selected" )
                },
                success: function(data) {
                    response(data);
                }
            });
        }
    });

PHP


    $category = $_GET['category'];

    $query = $db->query("SELECT * FROM products WHERE productName LIKE '%".$searchTerm."%' AND category = '$category'");

如何使用取决于 html 选择框中选定值的 php 创建 Jquery 自动完成输入？

问题描述

1 个解决方案

解决方案1
0 2020-01-02 07:47:06

如何使用取决于 html 选择框中选定值的 php 创建 Jquery 自动完成输入？

问题描述

1 个解决方案

解决方案1 0 2020-01-02 07:47:06

解决方案1
0 2020-01-02 07:47:06