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>