Hi Team
The coding is working, now the problem is to find a way when and after filter search. Want to take the result to pass it to the text field from the form using ajax. Below is my current logic.
// ajax call
<script> $(document).ready(function () { // Function to handle search button click event $('#searchButton').on('click', function () { var searchTerm = $('#searchInput').val().trim(); if (searchTerm !== '') { // Send an AJAX request to the controller action to search for users $.ajax({ url: '@Url.Action("SearchUsers", "Home")', type: 'POST', dataType: 'json', data: { searchTerm: searchTerm }, success: function (data) { // Clear previous search results $('#userTable tbody').empty(); // Iterate through the retrieved user details and append them to the table $.each(data, function (index, user) { var row = '<tr>' + '<td>' + user.DisplayName + '</td>' + '<td>' + user.Email + '</td>' + '<td>' + user.Title + '</td>' + '<td>' + user.Department + '</td>' + '<td>' + user.Presence + '</td>' + '<td>' + user.WorkPhone + '</td>' + '<td>' + user.Location + '</td>' + '</tr>'; $('#userTable tbody').append(row); }); // Show the modal with search results $('#checkDetailsModal').modal('show'); }, error: function (jqXHR, textStatus, errorThrown) { // Handle error if any console.error('Error:', textStatus, errorThrown); } }); } }); // Function to handle OK button click event $('#okButton').on('click', function () { // Get the selected user's display name and set it in the Auditor text field var selectedUserDisplayName = $('#userTable tbody tr.selected td:first').text(); $('#auditor').val(selectedUserDisplayName); // Close the modal $('#checkDetailsModal').modal('hide'); }); }); </script> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="okButton">OK</button> <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancelButton">Cancel</button> </div> </div> </div> </div>
// form
<!--Auditor names and address--> <div class="form-group row"> @Html.LabelFor(model => model.Auditor, htmlAttributes: new { @class = "col-md-4 col-form-label text-md-right" }) <div class="col-md-8"> <div class="input-group"> <input type="text" class="form-control" id="auditor"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="check-details"> <img src="@Url.Content("~/Images/Person-fill.svg")" alt="Check Names" style="height: 20px; width: 20px;" /> </button> <button class="btn btn-outline-secondary" type="button" id="browse-directory"> <img src="@Url.Content("~/Images/sov-address-book.png")" alt="Check Names" style="height:20px; width:20px;" /> </button> </div> </div> </div> </div> <style> .table-responsive { overflow-x: auto; } </style> <!--Modal form popup for user checks details--> <div class="modal fade" id="checkDetailsModal" tabindex="-1" role="dialog" aria-labelledby="checkNamesModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="checkDetailsModalLabel">Select People and Groups</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 border-right"> <!-- Left Border: Search --> <div class="d-flex justify-content-between align-items-center mb-3"> <div class="input-group"> <input type="text" id="searchInput" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-outline-secondary" id="searchButton" type="button"> <i class="fas fa-search"></i> Search </button> </div> </div> </div> <!-- Style background for the container --> <style> .light-grey-list li { background-color: #808080; /* Dark Grey color */ padding: 5px; } </style> <!-- List of available users shown --> <div class="border p-3"> <!-- Ordered List Content Here --> <ol class="light-grey-list"> <li> <!-- Users list --> <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">All Users<span id="usersCount" style="display: none;">0</span> </li> <li> <!-- Active directory users --> <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">Active Directory<span id="activeCount" style="display: none;">0</span> </li> <li> <!-- Organisation users --> <img src="/Images/active-directory-users.jpg" alt="Active Directory Icon" class="mr-2" style="width: 30px; height: auto;">Organization<span id="orgCount" style="display: none;">0</span> </li> </ol> </div> </div> <div class="col-md-6"> <!-- Right Border: Table --> <div class="d-flex justify-content-between align-items-center mb-3"> <h5 class="mb-0">Details</h5> </div> <div class="border p-3 table-container table-responsive"> <!-- Table with Display Name, E-mail Address, Title, Department, Presence, Work Phone, Location --> <table class="table table-bordered" id="userTable"> <thead> <tr> <th>Display Name</th> <th>E-mail Address</th> <th>Title</th> <th>Department</th> <th>Presence</th> <th>Work Phone</th> <th>Location</th> </tr> </thead> <tbody> <!-- Table Body Content Here --> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <!-- Add more rows as needed --> </tbody> </table> </div> </div> </div> </div> </div>