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

时间:2015-11-23 22:42:41

标签: javascript jquery search

所以我有javascript代码前置"标记:"或"供应商:"在每个搜索词之前,但是我想将其隐藏在用户之外,所以我创建了一个隐藏的输入字段来发送代码但是它没有正确地预先添加"标记:"和#34;供应商:"在每个字之前。而是输入整个字符串,然后输入搜索条件。

<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 +供应商%3A &amp; red = tote#fullscreen = true&amp; search = home

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

1 个答案:

答案 0 :(得分:0)

您将获得一个空值并将其插入此处:

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

您应该做的是获取用户给定的查询,这是您命名为“红色”的输入。

$(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() { ... };

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