Creating a powerful front-end search, filter and sorting

By: Seeb El | Asked: 07/20/2023
ForumsCategory: How-toCreating a powerful front-end search, filter and sorting
Seeb El asked 9 months ago
Hi I want to create a front-end search, filter and soring for users to be able to display airline sustainability data in different ways
  • I have a view on the front page with listing of airline companies. The detail pages contains many submitted data coming from all sort of fields such as text, dropdowns, numbers
  • I want a front-end search, filters and sorting which contains dropdowns, checkboxes, sliders, stars and so on
I expect the filtering to happen instantaneously using ajax Any idea if this is achievable?    
3 Answers
Victor Font answered 9 months ago
You can do anything you can imagine with a Search form. Using Ajax to refresh a view requires custom code. Normally, search forms work by redirecting to a different URL on submit. The URL includes a query string of field values used in the search which are then passed to the view's filter. You can't do this with AJAX. With AJAX, you need to create the jQuery to trigger the HTTP REQUEST, which returns your new values as JSON< which you then have to parse and replace the current view in the DOM with the new view. It's all doable, but if you're not a developer, you can probably expect to pay someone around $5,000 USD to build this type of functionality for you. You can find developers here:
gonzo Gonzogonzo Gonzo answered 9 months ago
You can do this pretty easily with custom fields using a combination of ACF Pro and Filter Everything Pro (available on code canyon). FEP has ajax loading which is pretty straightforward to set up too. Both should cost you under $200 for a year's license and have good documentation.
Seeb El answered 9 months ago
Hi gonzo Thanks for your reply! Please refer to the 3rd scenario below and kindly provide me with some words of wisdom and guidance Regarding your suggested solution, I'm curious if you did try FEP+ACF with Formidable (view)? Were you successful? I will try to explain what I have tried and found out so far. This could help anyone out there looking for similar functionality and might save them time and provide them with some clues. SCENARIO 01: Using FF to create Search, Filtering and Sorting Application for the View Listing Summary: A basic text field to search works just fine to find the term (as explained in the tut). It gets complicated and requires coding if you add more custom fields for a more complex search and filtering solution.   - Once you add to the mix dropdowns (taxonomies/terms), checkboxes, sliders, star ratings things become complicated and give unexpected results - Complex or missing documentation on how to set up sliders, dynamic, stars and dropdowns from taxonomies - No documentation about ratings and sliders and radio buttons and the checkbox solution needs some custom code - No out of the box Ajax functionality without writing custom codes - Reset button isn't clearing the form so the user can do another search from scratch - No straightforward solution, even if you choose your custom fields and set the correct parameters in the Default Value section and set the correct structure in the redirect URL for each field. Summary: that shows the custom filter solutions might not be soo easy. There are some risks in this case. If the slider not working on number type inputs (custom fields) then this will be some front-end custom solution. The radio part, however, can be also tricky. SCENARIO 02: Using FF + FEP to create Search, Filtering and Sorting Application for the View Listing Summary: With regards to creating Search, Filtering and Sorting with FEP and FF, unfortunately the FEP fitler widget finds scores but it didn't work to filter the list in the View. According to the author of FEP: "It appears using the shortcode [display-frm-data] on the page with listings items that Formidable doesn't use normal WP_Query to display the data. The posts should be displayed with the WP_Query in order to filter them."  I'm wondering if this is indeed the case?! - The filter widget is appearing but it’s not filtering the View accordingly - The FEP widget only appears by setting the alternative location in the filter settings. But then the APPLY button uses a redirect filter instead of ajax.  - Only when the APPLY button is clicked then a redirect to another page is triggered. I expect filtering to happen using the ajax without redirecting.  - If I uncheck the «Apply Button» mode, then the filter on the front page disappears. Enabling the to filter content on alternative location, causes the AJAX to don't work. As AJAX expected to fitler content on the same page where the widget is. - In the “Where to filter?” I experimented with all the settings. Only when I choose “common wordpress pages”, and then “All archive pages…” in combination with "Alternative location", this is the only option that I get the correct WP_Query. All other option return “No WP Query found…”. But then AJAX doesn't work and I get a redirect. Is there a way to make Formidable shortcode use WP_Query instead? The posts should be displayed with the WP_Query in order to filter them with FEP widget. SCENARIO 03: Using FF + FEP + ACF Using FF and FEP to create Search, Filtering and Sorting Application for the View Listing I will try to use a combination of those three to explore whether the FEP widget can find WP_Query is now able to filter my listing using AJAX on the same page. If you have tried this option and was successful, can you kindly explain what you did to get it to work?   Thanks

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community