jquery - 使用 Bootstrap 5 时的 jQuery UI 自动完成显示

Question

我有一个包含在 Bootstrap 5 中的表单，我正在尝试将 jQuery Autocomplete 应用到该表单。

我已经成功地编写了我的 jQuery 和 PHP，当它在没有 CSS 的基本表单上时，它完全按照我想要的方式工作。但是，当我尝试应用工作代码（根据需要进行调整）时，不会出现自动完成下拉菜单。

我在这里看到了帖子：（stackoverflow 帖子）在 Bootstrap 输入字段中设置样式 jQuery 自动完成

我还在这里查看了 jQuery Autocomplete API 文档

为了避免混淆，您将在下面找到没有任何自定义 CSS 尝试的代码。

---

表格摘录

        <div class="row pt-2">
        <div class="col ms-0 ps-0">
        <h4 class="mt-2">Buyer's Information</h4>
        <hr>
            <div class="row ps-2 pb-2">
                <div class="col pe-2 ps-0">
                    <div class="form-floating mb-0">
                        <input type="text" class="form-control" name="buyerFirstName ui-autocomplete" id="buyerFirstName" placeholder="Buyer #1 First Name">
                        <label for="buyerFirstName">Buyer #1 First Name</label>
                    </div>
                   

我还尝试在下拉列表的输入下方添加一个 div 元素，但没有成功。

我包括的样式和脚本标签：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/color/jquery.color-2.2.0.js" integrity="sha256-gvMJWDHjgDrVSiN6eBI9h7dRfQmsTTsGU/eTT8vpzNg=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.6/jquery.inputmask.min.js" integrity="sha512-6Jym48dWwVjfmvB0Hu3/4jn4TODd6uvkxdi9GNbBHwZ4nGcRxJUCaTkL3pVY6XUQABqFo3T58EMXFQztbjvAFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js" integrity="sha512-TToQDr91fBeG4RE5RjMl/tqNAo35hSRR4cbIFasiV2AAMQ6yKXXYhdSdEpUcRE6bqsTiB+FPLPls4ZAFMoK5WA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>

<script src="js/main.js"></script>

<link rel="stylesheet" type="text/css" href="../public/css/style.css"/>

自动完成的 jQuery 代码：

$(document).ready(function(){
    $('#buyerFirstName').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: './autocomplete.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    search: request.term
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function(event, ui) {
            $('#buyerFirstName').val(ui.item.label);
            $('#buyerLastName').val(ui.item.value);
            $('#buyerCellPhone').val(ui.item.phone1);
            $('#buyerEmail').val(ui.item.email1);
        }
    });
});

最后是 PHP 代码：

<?php 

try {
    require '../config.php';
    $connection = new PDO($dsn, $username, $password, $options);

    $inputQuery = $_POST['search'];

    $sql = 'SELECT * FROM buyers WHERE firstName LIKE :firstName';
    $statement = $connection->prepare($sql);
    $statement->execute(['firstName' => '%' . $inputQuery . '%']);

    $result = $statement->fetchAll();

    foreach ($result as $row) {
        $response[] = array(
            'value' => $row['firstName'],
            'label' => $row['firstName'] . ' ' . $row['lastName'],
            'lastName' => $row['lastName'],
            'phone1' => $row['phone1'], 
            'email1' => $row['email1'],
        );
    }

    echo json_encode($response); 

} catch (\PDOException $error) {
    throw new \PDOException($error->getMessage(), (int)$error->getCode());
}

?>

---

同样，当我在没有 CSS 干扰的测试服务器中时，这段代码一切正常，我的主要问题是我没有得到自动完成的下拉菜单。

有没有人对我如何让它正常运行有任何想法？

标签： jquerycssautocomplete