首页 > 解决方案 > 搜索多个类别

问题描述

我喜欢通过独特的多个类别搜索单词。

我准备了这段代码。

<form role="search" class="cat-search" action="<?php bloginfo('url'); ?>" method="get">

<input type="checkbox" value="0" name="cat" id="cat0" /><label for="cat0">all categories</label>
<input type="checkbox" value="1" name="cat" id="cat1" /><label for="cat1">category 1</label>
<input type="checkbox" value="2" name="cat" id="cat2" /><label for="cat2">category 2</label>
<input type="checkbox" value="3" name="cat" id="cat3" /><label for="cat2">category 3</label>
<input type="checkbox" value="4" name="cat" id="cat4" /><label for="cat2">category 4</label>
<input type="checkbox" value="5" name="cat" id="cat5" /><label for="cat2">category 5</label>  

<input name="s" size="25" type="text" placeholder="search after select categories" />
<input type="submit" class="cat-search" value="search" />

</form>

当我尝试使用类别 1 和 2 搜索“单词”时,url 变成了这样。

/?cat=1&cat=2&s=字

有没有办法把它改成这个网址?

/?cat=1,2&s=单词

标签: wordpress

解决方案


jQuery 用这些来得心应手,

删除所有这些复选框上的名称属性并为 cat 添加隐藏输入,然后根据复选框填充其值

<form role="search" class="cat-search" action="<?php bloginfo('url'); ?>" method="get">
    <input type="checkbox" value="0" id="cat0" class="cats"/><label for="cat0">all categories</label>
    <input type="checkbox" value="1" id="cat1" class="cats"/><label for="cat1">category 1</label>
    <input type="checkbox" value="2" id="cat2" class="cats"/><label for="cat2">category 2</label>
    <input type="checkbox" value="3" id="cat3" class="cats"/><label for="cat3">category 3</label>
    <input type="checkbox" value="4" id="cat4" class="cats"/><label for="cat4">category 4</label>
    <input type="checkbox" value="5" id="cat5" class="cats"/><label for="cat5">category 5</label>  
    <input type="hidden" id="cat" name="cat" />
    <input name="s" size="25" type="text" placeholder="search after select categories" />
    <input type="submit" class="cat-search" value="search" />

</form>

然后您的 jQuery 在单击复选框时将值分配给隐藏的输入

$('body').on('click', '.cats', function() {
    var cats = $('.cats:checked').map( function() {
        return this.value;
    }).get().join(",");
    $('#cat').val( cats );
});

请注意,网址中的逗号 (,) 将被编码,看起来像

yoursite.com/?cat=0%2C1%2C2%2C3%2C4&s=bah 

尽管如果您正在处理 php 上的值,这无关紧要


推荐阅读