Question

我尝试在.NeCore 2.2 Web应用程序中使用jquery-ui自动完成组合框。看来我的CSS有问题。这里看起来像：

除了jquery-ui CSS外，我还使用数据表CSS和引导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);
    }

自动完成下拉菜单显示不正确

1 个答案: