移动/桌面的重复搜索过滤器仅在桌面上工作

Question

我有一个可以根据位置、技能、姓名等过滤的人员列表。

桌面版本是一个带有选项和搜索按钮的 div，如下所示：

       <div class="form-group col-xs-12 col-md-12" style="position: absolute; display: contents;">
            <div class="search-input ">
                <input type="text" name="s" id="s" class="input-text full-width" placeholder="<?php _e( 'Search by name', 'trav') ?>" value="<?php echo esc_attr( $s ); ?>" />
            </div>
            <div class="col-xs-6">
                <button class="btn-medium icon-check full-width search-again"><?php _e( 'Search', 'trav' ) ?></button>
            </div>
       </div>

（此处仅粘贴 1 个过滤器作为示例）

移动版是桌面版的副本，但在bootstrap collapse中。我在移动设备中隐藏桌面过滤器，并使用 bootstrap 中的 hidden 类在桌面设备中隐藏移动过滤器。

它在桌面上运行良好，但是当出现移动版本时，过滤器不适用，也就是说，它显示完整的结果列表，而不是像桌面那样的过滤列表。

会不会有重复的元素？

Answer 1

没有看到更多代码，我没有太多工作要做。如果这里使用了相关的 php、html 和 javascript，我就不可能真正知道发生了什么。所以更新你的问题，我再看看。

但是根据那个小sn-p，以及你使用的一些词，我有一种预感。

我在这里看到的主要是name="s" 和id="s" 属性。你说桌面过滤器工作正常。但是作为桌面过滤器“副本”的移动过滤器不是吗？ 您只是复制并粘贴了吗？在 html 代码中，桌面过滤器是否位于移动过滤器之前？

另一个观察是我注意到这个过滤器没有包裹在 <form> 元素中？移动端和桌面端是否封装在同一个<form> 中？

这就是我想知道的事情......

如果移动输入和桌面输入具有相同的名称属性（都具有name="s"），并且它们被包裹在同一个表单元素中，那么这很有意义。因为每当您提交表单时，您实际上是在向 php 发送 2 个 name="s" 实例，并且因为 name="s"（桌面过滤器）的第一个实例在移动设备上是空的，所以 PHP 忽略了第二个实例并发送回您在技术上要求的空过滤列表。但它适用于桌面，因为name="s" 的第一个实例有一个值。

如果那个疯狂的猜测是正确的，那么你的解决方案是......

将两个过滤器分成单独的表单元素。

还要确保删除重复的 name 和 id 属性。

现在我再次称其为疯狂猜测，因为它就是这样，我在这里没有什么可真正继续的。正如我所说，提供更多代码，我会再看一下。

但是给你另一个想法。这些过滤列表是用任何 JavaScript 实现的吗？因为 js 不能很好地处理重复的 id 属性。它将查看第一个实例，并忽略所有其他实例。正如它应该。或者破坏整个脚本。

需要更多代码。