How to display result of autocomplete every property on separated Line instead using slash?

Question

I work on an ASP.NET Web API. I face issue when I call the Web API using a jQuery Ajax request.

My issue is autocomplete result display separated by slashes:

Id - Name - Designation

but expected result I need to get is:

Id : 121
Name : michel nicol
Designation : It Manager

Meaning I need to display Id on the first line and on the second line I will have Name and the third line holds the Designation.

So every property will be on one line instead of using separated slashes.

Full code details:

$("#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 controls used for the autocomplete:

<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>

Scripts version used to generate auto complete

<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>

Updated answer:

can you please show me how to modify my code to display id on line and second line name and third line Designation on select by code

Answer 1

I solved Issue by adding /n to every feature result to autocomplete and it worked success .

so i add /n to name and Designation on succeeds response

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
    };
}))