引导导航栏：使搜索按钮起作用

Question

Bootstrap 4.1的导航栏（尤其是搜索表单）给我带来很多麻烦。我一直在使用this documentation link来提供帮助。我有一个看起来很像引导程序的搜索表单：

我希望允许用户输入一些文本，当他们单击搜索按钮时，我希望他们根据输入的文本重定向到新链接。这是此表单的HTML代码：

<form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Enter text" aria-label="Search" id="text-form">
    <button class="btn btn-outline-light my-2 my-sm-0" type="submit" id="text-search" onclick="searchClick()">Search</button>
</form>

这是JavaScript文件中的searchClick（）函数：

var searchClick = function() {
    var text = document.getElementById("text-form").value;
    // alert(text);
    window.location.href = "www.<some-url>" + text;
}

我已经确认可以从输入框中删除文本（使用注释掉的警报），但是无论我尝试什么，它都不能将我重定向到任何地方或将我重定向到当前页面。我已经根据其他在线搜索尝试过使用此代码进行很多不同的查找：我已将按钮更改为<a>，其href字段会在点击时发生变化（因为如果没有该字段，我将无法对其进行预填充文本字段值），我尝试过向searchClick（）函数添加返回值，并且尝试弄乱类并将类型字段更改为“重置”或“输入”之类的东西，或者将其完全删除。我尚未找到解决方案，因此我想在这里问一下，是否有人比我更了解引导程序，所以我无法提供一些见解。感谢您的宝贵时间。

Answer 1

尝试使用他的location.replace()方法而不是location.href属性，可能还需要将要附加到url的文本作为有效的查询字符串传递。例如：http://example.com/over/there?name=ferret

Answer 2

您好，只需添加表单操作和方法即可。您不再需要JavaScript。 示例：

<form action="" method="post" >
    <!-- input field and button -->
</form>

快乐编码：）