如何将搜索框值添加到 URL答案

【问题标题】：How to add the search box value to URL如何将搜索框值添加到 URL
【发布时间】：2019-05-09 19:58:36
【问题描述】：

我有一个 html 视图，它是一个字符串形式的搜索栏。所需部分的代码如下。那么，如何正确地将搜索栏中的值放入 URL 字符串？我可以只用html做这个还是我需要用js？

<form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto" method="get" 
action="/search/" >
                <div class="form-group mb-0">
                    <div class="input-group input-group-alternative">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                        </div>
                        <input class="form-control" id="mySearch" placeholder="Search" type="search" value >
                    </div>
                </div>
            </form>.

【问题讨论】：

如果您单独使用 html 和 JS，您将不得不在搜索表单中使用 preventDefault 并使用 window.location.href 来构造所需的 URI。你目前在做什么？这将有助于我们给出更有针对性的答案

标签： javascript html view

【解决方案1】：

我不知道这如何与表单一起使用，也许这有助于让您更接近？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () { 
$('#dynam-now').click(function () {
console.log($('#mySearch').val())

});
});

</script>

<form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto" method="get" 
action=$('#mySearch').val()" >
                <div class="form-group mb-0">
                    <div class="input-group input-group-alternative">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                        </div>
                        <input class="form-control" id="mySearch" placeholder="Search" type="search" value >
                    </div>
                </div>
            </form>
            <button id="dynam-now">Click to search</button>

【讨论】：

我看到了这个，但我不知道如何实现它 -

正文> sitepoint.com/community/t/…