Мне нужно добавить поиск с search.ejs на главную index.ejs. код:

index.ejs:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/css/main.css" />
    <title>Home</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <% if (userLoggedIn) { %>
          <li><a href="/profile/<%= musician.id %>">Hello, <%= username %></a></li>
          <li><a href="/logout">Logout</a></li>
          <% } else { %>
          <li><a href="/register">Register</a></li>
          <li><a href="/login">Login</a></li>
          <% } %>
        </ul>
		
		
      </nav>
    </header>
    <main>
      <h1>Welcome to the Musician FinderR!</h1>
      <p>Find the perfect musician for your next project or collaboration.</p>
      <a href="/search" class="button">Search Musicians</a>
	  
	  <div>
  <h2>New Musicians</h2>
  <ul>
    <% musicians.forEach(musician => { %>
    <li>
      <a href="/profile/<%= musician.id %>"><%= musician.name %></a> - <%= musician.thumbnail %>
      <%= musician.genre %>, <%= musician.instrument %>
    </li>
    <% }); %>
  </ul>
</div>
    </main>
  </body>
</html>

search.ejs:

<!DOCTYPE html>
<html>
<head>
	<title>Search Musicians</title>
	<link rel="stylesheet" href="/jquery-ui/themes/base/all.css" />
<script src="/jquery/dist/jquery.min.js"></script>
<script src="/jquery-ui/dist/jquery-ui.min.js"></script>

</head>
<body>
	<h1>Search Musicians</h1>
	<form action="/search" method="get">
		<label for="query">Search by name or genre:</label> <input id="query" name="query" type="text" value="<%= query %>"><br>
		<br>
		<label for="role">Search by role:</label> <select id="role" name="role">
			<option value="">
				All
			</option>
			<option value="Band">
				Band
			</option>
			<option value="Artist">
				Artist
			</option>
		</select>
		
<label for="city">Search by location:</label>
<input id="city" name="city" type="text" autocomplete="on" value="<%= city %>" data-value="">

		<br>
		<!-- Add new input field for location -->


		<br>
		
		<br>
		<button type="submit">Search</button>
	</form><%if (musicians.length > 0) { %>
	<h2>Results:</h2>
	<ul>
		<%musicians.forEach(musician => { %>
		<li>
			<a href="<%= musician.profileLink %>"><%= musician.name %> <%if (musician.thumbnail) { %> <img src="/img/<%= musician.thumbnail %>" alt="<%= musician.name %>"> <%} %></a> - <%= musician.genre %> - <%= musician.location %> <%if (musician.soundcloud) { %> <a href="%3C%=%20musician.soundcloud%20%%3E">SoundCloud</a> <%} %>
		</li><%}); %>
	</ul><%} else if (query || role) { %>
	<p>No musicians found.</p><%} %>
	
<script>



  

  $("#city").autocomplete({
    source: '/autocomplete/cities',
    minLength: 1,
  });

  const queryInput = document.querySelector("#query");
  const roleInput = document.querySelector("#role");
  const cityInput = document.querySelector("#city");

  queryInput.value = "<%= query %>";
  roleInput.value = "<%= role %>";
  cityInput.value = cityInput.getAttribute('data-value');

  const query = queryInput.value;
  const role = roleInput.value;
  const city = cityInput.value;

</script>
</body>
</html>