Javascript 合并来自2个单独输入字段的搜索词

因此，我有javascript代码在每个搜索词之前添加“tag:”或“vendor:”，但我想对用户隐藏它，所以我创建了一个隐藏的输入字段来发送代码，但它没有正确地在每个词之前添加“tag:”和“vendor:”。而是输入整个字符串，然后输入搜索词

<form method="get" action="/search" id="search-home">
                <button type="submit" value="search"></button>
                <input type="hidden" name="type" value="product" />
                <input type="hidden" name="q" class="searchtext" />
                <input type="text" name="red" placeholder="Search"/>
            </form>

        <script>
        $(document).on('submit','#search-home',function(){
        var searchtext = $('.searchtext').val();
          $('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
        });
        </script>

$（文档）.on（'submit'，'#search home'，函数（）{
var searchtext=$（'.searchtext'）.val（）；
$（'.searchtext'）.val（“标记：“+searchtext+”*或供应商：“+searchtext+”*”）；
});

下面是Url的代码 +或+供应商%3A&red=tote#全屏=true&search=home

下面是它应该是什么样子。

---

您得到一个空值并将其插入此处：

$(document).on('submit','#search-home',function(){
    var searchtext = $('.searchtext').val(); // <- HERE
    $('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});

使用上述修复程序，您的URL将类似于：

http://zzz.co/search?type=product&q=q=tag%3Atote+或+供应商%3手提袋&红色=手提袋

我不知道你的hashbang（

#

）是从哪里来的，但我假设它会像以前一样附加在末尾

如果您想摆脱

red=tote

部分，您有几个选项。通过

$（'input[name=“red”]”）清空值。val（“”）

将使其在url中显示为

红色=

。如果希望它完全消失，则应使用

$（'input[name=“red”].remove（）；

我还建议将您的“on”钩子附加到表单，而不是整个文档。这只是一种避免使用不必要资源的良好做法，因为每次提交表单时，无论选择哪个选项，此钩子都会冒泡。相反，请考虑：

$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };

这样，只有在特定表单上发生提交事件时，它才会冒泡，从而大大减少使用这些资源的可能实例

$('form#search-home').on('submit', 'button[type="submit"]', function() { ... };