我怎样才能制作一个可以搜索两种不同事物的搜索框？

Question

我正在使用 Express 制作一个 EJS 应用程序，我有一个搜索框需要能够搜索火箭发射和火箭事件。我做不到，因为我不能嵌套 form 个元素。我需要能够根据按下的按钮

转到 /launches 和 /events

这是我的搜索栏：

<div class="search-bar">
    <form action="/events" method="POST">
        <form action="/launches" method="POST">
            <input
                type="text"
                id="query"
                placeholder="Enter the search query: "
                name="query"
                required
            />

            <a href="/launches"><button type="submit">Search launches</button></a>
        </form>
        <a href="/events"><button type="submit">Search events</button></a>
    </form>
</div>

Answer 1

使用服务器决定

您需要提交按钮上的名称和值，然后服务器知道，因为它们只从单击的按钮中获得名称=值

<form action="/eventsOrLaunches" method="POST">
  <input type="text" id="query" placeholder="Enter the search query: " name="query" required />
  <button type="submit" name="eventType" value="events">Search events</button>
  <button type="submit" name="eventType" value="launches">Search launches</button>
</form>

如果坚持两条路线：

注意：键入并按回车键将默认执行事件

window.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById("source");
  const query = document.getElementById("query");
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.matches("button") && query.value.trim()) {
      source.action = "/"+tgt.value;
      source.submit();
    }
  });
});

<div id="nav">
  <form action="/events" method="POST" id="source">
    <input type="text" id="query" placeholder="Enter the search query: " name="query" required />
  </form>
  <button type="button" value="events">Search events</button>
  <button type="button" value="launches">Search launches</button>
</div>

Ajax版本

window.addEventListener("DOMContentLoaded", function() {
  const query = document.getElementById("query");
  const form = document.getElementById("search");
  const res = document.getElementById("result");
  form.addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.matches("button")) tgt.form.action = "/" + tgt.value; // set the action
  })
  form.addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission
    const q = query.value.trim();
    if (q.length > 0) {
      const url = this.action; // /events or /launches
      fetch(url, {
        method: 'POST',
        body: JSON.stringify({ "query": q })
      })
      .then(response => res.textContent = response) // show the result
      .catch(error => console.log('Request failure: ', error));
    }
  });
});

<form id="search">
  <input type="text" id="query" placeholder="Enter the search query: " name="query" required />
  <button type="submit" value="events">Search events</button>
  <button type="submit" value="launches">Search launches</button>
</form>
<div id="result"></div>

我怎样才能制作一个可以搜索两种不同事物的搜索框？

How can I make a search box that can search for two different things?

html

ejs

node.js