仅适用于桌面的移动/桌面重复搜索过滤器

Question

I have a list of people that can be filtered depending on the location, skill, name, etc.

The desktop version it's a div with the options and a search button, like this:

       <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>

(only pasted 1 filter here for the example)

Then the mobile version it's a copy of the desktop version, but inside a bootstrap collapse. I hide desktop filters in mobile and hide the mobile filters in desktop with the hidden classes from bootstrap.

It works well in desktop, but when the mobile versions appears, the filters don't apply, that is, it shows the full list of results instead of a filtered list like in desktop.

Could it be having the elements duplicated?

Answer 1

Without seeing more code I don't have much to go on. It is impossible for me to truly know what is going on without seeing the relevant php, html, and javascript if any is in use here. So update your question with that, and I'll take another look.

But that being said based on that little snippet, and some of your words used, I have a hunch.

Mainly what I am seeing here is name="s" and id="s" attributes. You said the desktop filter works fine. But the mobile filter which is a 'copy' of the desktop filter doesn't? Did you just copy and paste it? Does the desktop filter come before the mobile filter in the html code?

Another observation is that I notice that this filter is not wrapped inside of a <form> element? Are the mobile and desktop wrapped within the same <form>?

Heres what I'm wondering is going on..

If the mobile input and desktop input have the same name attribute(both have name="s"), that and the they are wrapped inside the same form element, then this makes perfect sense. Because whenever you submit the form, you're really sending php 2 instances of name="s", and because the 1st instance of name="s" (the desktop filter) is empty on mobile, the PHP is ignoring the second instance and sending back the empty filtered list you're technically asking for. But it works on desktop because the 1st instance of name="s" has a value.

If that wild guess is correct, then your solution is to..

Seperate the two filters into separate form elements.

Also be sure to remove the duplicate name and id attributes.

Now again I call it a wild guess because thats what it is, I have nothing to really go on here. As I said provide more code, and I'll take another look.

But one other thought for you. Are these filtered lists being implemented with any JavaScript ? Because js doesn't play nicely with duplicate id attributes. It will look at the 1st instance, and ignore all others. As it should. Or break the whole script.

Need more code.