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

<div class="modal fade" id="searchPeople2" tabindex="-1" aria-labelledby="searchPeople2Label" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="searchPeople2Label">{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="formSearchPeople2">
					<input type="hidden" name="type" value="2">
					<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="searchResult2">
					{echo(getLang('search_result_no'))}
				</div>
			</div>
		</div>
	</div>
</div>

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