如何在分隔行上显示自动完成每个属性的结果，而不是使用斜杠？

Question

我从事 ASP.NET Web API 工作。当我使用 jQuery Ajax 请求调用 Web API 时，我遇到问题。

我的问题是自动完成结果显示用斜杠分隔：

Id - Name - Designation

但我需要得到的预期结果是：

Id : 121
Name : michel nicol
Designation : It Manager

这意味着我需要在第一行显示

Id

，在第二行我将显示

Name

，第三行显示

Designation

。

因此每个属性都将位于一行，而不是使用分隔的斜杠。

完整代码详情：

$("#txtDirectManagerId").autocomplete({
        source: function (request, response) {
            var searchTextDirectManager = $("#txtDirectManagerId").val();
            console.log("search text" + searchTextDirectManager)
            $.ajax({
                url: '@Url.Action("GetAllEmployeeBasedSearchTextDirectManager", "Resignation")',
                data: { searchTextDirectManager: searchTextDirectManager },
                method: "GET",
                dataType: "json",
                success: function (data) {
                    response($.map(data, function (item) {
                        label: "File No : " + item.EmployeeID + " - " + "Name :" + item.EmployeeName + " - " +
                               "Designation : " + item.Designation, value: item.EmployeeID, employeeName: item.EmployeeName
                        };
                    }))
                }
            });
        },
        position: { my: "right top", at: "right bottom" },
        appendTo: '#searchContainerDirector',
        select: function (event, ui) {
            $("#DirectManagerName").val(ui.item.employeeName);
        },
        minLength: 4,
    });

用于自动完成的 HTML 控件：

<div class="col-md-7">
    @Html.EditorFor(model => model.LineManager, new { htmlAttributes = new { @class = "form-control", id = "txtLineManagerId" } })
    <div id="searchContainer">
    </div>
</div>
<div class="col-md-7">
</div>

用于生成自动完成的脚本版本

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"
        language="javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

更新答案：

你能告诉我如何修改我的代码以在行上显示id以及第二行名称和第三行

Designation

通过代码选择

Answer 1

我通过将 /n 添加到每个功能结果以自动完成来解决问题 并且成功了。

所以我在名称中添加 /n 并在成功响应时指定

response($.map(data, function (item) {
    return {
        label: "Id: " + item.EmployeeID + "\nName: " + item.EmployeeName + "\nDesignation: " + item.Designation,
        value: item.EmployeeID,
        employeeName: item.EmployeeName,
        Designation: item.Designation
    };
}))