Separate search input and filters on results page

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Separate search input and filters on results page

This topic contains 5 replies, has 2 voices, and was last updated by thebizpixie thebizpixie 2 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39965
    thebizpixie
    thebizpixie
    Participant

    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.
    #39977
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #40043
    thebizpixie
    thebizpixie
    Participant

    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 thebizpixie . Reason: Adding clarification of instance without filters block
    • This reply was modified 2 months, 1 week ago by thebizpixie . Reason: as previously
    #40046
    thebizpixie
    thebizpixie
    Participant

    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.

    #40066
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #40076
    thebizpixie
    thebizpixie
    Participant

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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.