如何在html中使用搜索框？

Question

我创建了一个 api，它将从我的数据库中搜索数据。它的工作原理如下：localhost://12345/api/example/search/userinput。我想将其集成到我的前端中，为此我在 html 文件中编写了以下代码

<input type="search" placeholder="Search TradeId" name="input">

<button onclick="document.location = 'api/example/search/input'" class="btn btn-primary navbar-btn" >Search Trade</button>

但它所做的是搜索我的数据库中的“输入”，而不是我输入的值。可以说我必须搜索约翰，但它正在搜索输入。

Answer 1

也许是这样的：<button&nbsp;onclick="document.location&nbsp;=&nbsp;'api/example/search/input?'&nbsp;+&nbsp;document.getElementById('input').value"&nbsp;class="btn&nbsp;btn-primary&nbsp;navbar-btn"&nbsp;>Search&nbsp;Trade</button>但是你的 API enpoint 是“/input”还是“/userinput”？

Answer 2

可以通过编写脚本来解决<script>&nbsp; &nbsp; &nbsp; &nbsp; function myFunction(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x = document.getElementById("myinput").value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var q = location.href;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var y = "api/example/search/";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var t = q+y+x;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; location.assign(t);&nbsp; &nbsp; &nbsp; &nbsp; }</script><input type="search" placeholder="Search TradeId" id="myinput"><button onclick="myFunction()" class="btn btn-primary navbar-btn" >Search Trade</button>