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

【问题标题】：Merging search terms from 2 separate input fields合并来自 2 个单独输入字段的搜索词
【发布时间】：2015-11-23 22:42:40
【问题描述】：

所以我有 javascript 代码在每个搜索词之前添加“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>

这是 URL 与代码的样子 http://zzz.co/search?type=product&q=tag%3A+OR+vendor%3A&red=tote#fullscreen=true&search=home

这就是它的样子。
http://zzz.co/search?type=product&q=tag%3Atote+OR+vendor%3Atote#fullscreen=true&search=home

【问题讨论】：

标签： javascript jquery search

【解决方案1】：

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

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

您应该做的是让用户给出查询，即您命名为“red”的输入。

$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="red"]').val();
  $('.searchtext').val("tag:"+searchtext+"* OR vendor:"+searchtext+"*");
});

通过上述修复，您的网址将类似于： http://zzz.co/search?type=product&q=q=tag%3Atote+OR+vendor%3Atote&red=tote.

我不知道你从哪里得到你的 hashbang(#)，但我认为它会像以前一样附加在末尾。

如果您想摆脱 red=tote 部分，您有几个选择。通过$('input[name="red"]').val(''); 清空该值将使其在您的网址中显示为red=。如果你希望它完全消失，你应该使用$('input[name="red"].remove();。

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

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

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

【讨论】：