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

Posted 2023-05-08

【中文标题】自动完成下拉菜单未正确显示

【英文标题】：Autocomplete dropdown is not displayed properly

【发布时间】：2019-10-01 02:58:30

【问题描述】：

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

除了 jquery-ui css，我还使用 datatables 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");
            
        );
    );

【问题讨论】：

您是否在控制台中获得了建议位置？是它们在 DOM 中显示的问题吗？

是的，我在控制台中获取数据。

【参考方案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);