How to display autocomplete result id on first line and name on second line and designation to third line instead of using slash ?

Question

I work on asp.net MVC web API . I face issue when call web API using jQuery ajax request

my issue is autocomplete result display separated by slash

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 First line and second line I will display Name and Third Line I will display Designation .

so every property will be on one line instead of using slash separated .

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

Answer 1

In jQuery UI Autocomplete, you can customize the way each item in the dropdown is displayed by overwriting the _renderItem method. Here’s how you can modify your code to achieve the desired output:

$("#txtDirectManagerId").autocomplete({
    source: function (request, response) {
        // ... your existing AJAX call ...
    },
    // ... other options ...
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<div>Id: " + item.value + "</div><div>Name: " + item.employeeName + "</div><div>Designation: " + item.Designation + "</div>")
        .appendTo(ul);
};

In the _renderItem function, ul is the unordered list jQuery UI uses to build the dropdown, and item is the object for each individual item in the list. Here, we are appending a new list item (<li>) with the formatted HTML to the ul.

Make sure to add Designation to the item object in the response callback:

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

This way, each property (Id, Name, Designation) will be displayed on a new line in the dropdown, as you want.