jquery - 自动完成下拉列表未正确显示

Question

我尝试在 .NeCore 2.2 网络应用程序中使用 jquery-ui 自动完成组合框。 看来我的 CSS 有问题。这是它的样子:

除了 jquery-ui css，我还使用了数据表 css 和 bootstrap css。 也使用了这种风格:

<style>

.ui-autocomplete {
    max-height: 150px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    z-index: 1000 /*show the dropdown over the addform*/
}

html是这样的:

<div class="row">
    <div class="col-sm-3">
        <label id="PersonIdLable" class="custom-label">Choose Person</label>
    </div>
    <div class="col-sm-3">
        <input id="PersonId" class="form-control" type="text" />
    </div>
    <div class="col-sm-3">
        <input id="PersonName" class="form-control text ui-widget-content ui-corner-all" type="text" />
    </div>
    <div class="col-sm-2">
        <a class="btn btn-sm btn-primary" asp-action="ttCreate"><span class="glyphicon glyphicon-plus"></span>New Transaction</a>
    </div>
</div>

java 脚本按键事件是这样的:

       $('#PersonId').keydown(function () {
        //table = table.ajax.reload();
        $(this).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Household/getPersonsJson2/",
                    type: 'GET',
                    dataType: "json",
                    data: {
                        search_str: request.term
                    },
                    success: function (data) {
                        //console.log(data);
                        response(data);
                    }
                });
            },
            appendTo: "#dialog-form",
            minLength: 2,
            select: function (event, ui) {
                //console.log(ui.item.label + " " + ui.item.value);
                $("#PersonName").val(ui.item.label);
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    });

Answer 1

我解决了我的问题。问题是该操作返回了错误的字段名称。名称必须是“值”和“标签”。该操作现在看起来像这样:

[HttpGet]
    public async Task<IActionResult> getPersonsJson2(string search_str)
    {
        var persons = await (from p in _context.Persons
                             where p.FullNameWithPLN.ToLower().Contains(search_str.ToLower())
                             select new
                             {
                                 value = p.Id,
                                 label = p.FullNameWithPLN
                             }).OrderBy(a => a.label).ToListAsync();

        return Json(persons);
    }