如何在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 onclick="document.location = 'api/example/search/input?' + document.getElementById('input').value" class="btn btn-primary navbar-btn" >Search Trade</button>

但是你的 API enpoint 是“/input”还是“/userinput”？

Answer 2

可以通过编写脚本来解决

<script>

        function myFunction(){

            var x = document.getElementById("myinput").value;

            var q = location.href;

            var y = "api/example/search/";

            var t = q+y+x;

            location.assign(t);

        }

</script>

<input type="search" placeholder="Search TradeId" id="myinput">

<button onclick="myFunction()" class="btn btn-primary navbar-btn" >Search Trade</button>