jQuery UI Autocomplete in Bootstrap 5 Modal

Question

I am trying to display a jquery ui autocomplete widget in a bootstrap 5 modal and it is not working. I already have the api endpoint written that is returning the data the widget is expecting (list of objects with id and val properties). But when the modal opens, and a user types, you get an empty list. I've tried modifying CSS and diffrent modifications to the javascript with no success.

Modal Code:

<div class="modal fade" id="addBuyerModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">Add Buyer</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body .ui-front">
                <div class="form-group">
                    <label class="form-label">Buyer:</label>
                    <input id="txtName" class="form-control" type="text" />
                    <input type="hidden" id="hfBuyerId" value="00000000-0000-0000-0000-000000000000" />
                </div>
                <div class="form-group">
                    <label class="form-label">Quantity:</label>
                    <input id="txtNum" class="form-control" type="number" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="postPurchase()">Add</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

Javascript:

$(document).ready(function () {
        $("#txtName").autocomplete({
            appendTo: '#addBuyerModal',
            source: function (request, response) {
                $.ajax({
                    url: '/LiveHelper/AutoComplete/',
                    data: { "prefix": request.term },
                    type: "POST",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return item;
                        }))
                    }
                });
            },
            select: function (e, i) {
                $("#hfBuyerId").val(i.item.val);
            },
            minLength: 0
        }).focus(function () {
            $(this).autocomplete("search");
        });
    });

This is the what it looks like, as you can tell, the list was built, but no data is being displayed.

Answer 1

I figured this out. It was the model my webapi was returning. It was returning id & val instead of id & value. If you are using the autocomplete widget with the remote option, your json return should look like this:

{"id": "1", "value": "Some Value"},
{"id": "2", "value": "Another Value"}