View file application/appearance/standart/elements/modals/search.tpl

<div class="modal fade" id="searchPeople" tabindex="-1" aria-labelledby="searchPeopleLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="searchPeopleLabel">{echo(getLang('search_title'))}</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			
			<div class="modal-body">
				<form id="formSearchPeople">
					<input type="text" class="form-control" name="q" autocomplete="off" required placeholder="{echo(getLang('search_placeholder'))}">
					<button type="submit">
						<i class="bi bi-search"></i>
					</button>
				</form>
				
				<div id="searchResult">
					{echo(getLang('search_result_no'))}
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	var typingTimer;
	var doneTypingInterval = 500;
	
	$(document).ready(function() {
		$('#formSearchPeople input[type="text"][name="q"]').on('input', function() {
			clearTimeout(typingTimer);
			typingTimer = setTimeout(executeSearch, doneTypingInterval);
		});
	});
	
	function executeSearch() {
		var searchTerm = $('#formSearchPeople input[type="text"][name="q"]').val().trim();
		
		if(searchTerm.length <= 2) {
			return;
		}
		
		SendPost('/application/backstage/Search.php', {
			Search: 1, q: searchTerm
		}, (Result) => {
			$('#searchResult').html(Result.Message);
		});
	}

	$('form#formSearchPeople').submit(function(e) {
		e.preventDefault();
		SendPost('/application/backstage/Search.php', {
			Search: 1, this: this
		}, (Result) => {
			$('#searchResult').html(Result.Message);
		});
	});
	
	$('#searchPeople').modal('show');
</script>