Separate search input and filters on results page

[thebizpixieParticipant]

Hi Ernest,

My client has now asked for filters only on the results page, so I have two things I can’t figure out. I have searched the KB and the forum and can’t find anything similar to this.

1. How do I display the settings but ONLY on the results page?
2. How do I live update my search results (and NOT the search input) on the results page only.

Let me explain it like this (also see attached screenshots).

1. All other pages
On every other page, we want to have JUST the search input, with a drop down list of live results but no filters. On enter or magnifier click, the search redirects to the search results page. This is all working correctly.

2. Search results page
We want to have a search input again at the top of this page, but also display the search filters in the body, next to the results. When someone selects the filter options, I don’t want the search input to update (or expand the hover), but I do want the search results in the page body to update, based on the previous search term.

I can’t wrap my head around the best way to do this and was hoping you could point me in the right direction.

Do I need to use two search forms on the search results page? One for the input box (with no filters) and one for the filters (with no search input), just with duplicate settings? If so, how do I ensure that the search term is passed from the first search instance to the second?

Or are there settings within one search input that can create this behaviour for me?

Thanks for your guidance on this.

Nikki

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

1. If you want to use the same search bar, then the best option is to use a very simple CSS on the results page only to hide the search bar. If you place this to the results page, it will hide it and display only the settings:

.asp_m {
    display: none !important;
}

2. Use the results page live loading feature there. You may have to change the DOM selector to accomodate your exact page layout. In most cases the default works, but it depends on the exact theme structure.

This way you don’t need any duplicate search bars, and everything (filter states, search phrase etc..) will be passed to the results page when the initial search is made to the results page.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[thebizpixieParticipant]

To clarify, I DO want the search bar on the results page, but I DON’T want the hover to show when I select filter settings. I only want the hover to display when someone types directly into the search input box.

I do want the results list to update as someone modifies the filters via the settings. (see above screenshots)

I have activated the live search feature, and played with a number of different DIV ID’s to get the page to update, but none are behaving as expected.

If I choose any div (by ID) that includes the top search input form e.g. #page-container or #main-content (I’m using Divi)
>> reloads page, search results don’t change, resets filters back to their initial values
and if choose a div that contains the results list, but not the search input box, but includes the search filters block
>> reloads section, search results don’t change, filter settings disappear
and if choose a div that contains the results list, but not the search input box or the search filters block
>> reloads section, search results don’t change, filter settings remain intact (this one seems to work the closest to what I want, except for the whole “search results not updating” part)

In all cases, the search results don’t change and filters don’t appear to apply.

On my main search page I have inserted:
[wpdreams_ajaxsearchpro id=1]
and hidden the filter settings block with CSS.

On my search results page I have used both:
[wpdreams_ajaxsearchpro id=1]
AND
[wpdreams_asp_settings id=1]
in two separate locations, so the filters associated with the search input are hidden, and the filters display separately, just above my results list.

Is there a way to achieve the desired behavior using one search form? I’m happy to record a screencast if the behaviour I’m trying to achieve is still not 100% clear.

• This reply was modified 2 months, 1 week ago by  . Reason: Adding clarification of instance without filters block
• This reply was modified 2 months, 1 week ago by  . Reason: as previously

[thebizpixieParticipant]

OK, I believe I have made some progress with this, using the div that includes only the results list and not the search input or the filter block.

It seems that the live loading only works via GET and not POST. Is this the expected behaviour?

I would prefer not to have the parameters in the URL, but please let me know if this is indeed expected behaviour and the only way to get live loading working.

Thanks.

[Ernest MarcinkoKeymaster]

Yes – the get method is intentional in that case to perserve the page state in the browser. In this scenario there is no way around it unfortunately.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[thebizpixieParticipant]

OK, well at least I know that’s the limits I’m working within. Thanks for confirming.

[Author]

Posts