Forum Academy Marketplace Showcase Pricing Features

Searching and filters

So as you can see from the screen shot I have these fields that impact my search. The main bar where users can type what the item is, the distance, shipping or in person, location and time to rent and return an item.

This information feeds into a repeating group beneath it. I’m not quite understanding how to make the connection between these inputs to feed into the repeating group?

I have tried the search and auto-correct in order to cater to mispells and displaying of my items but when my users search it only applies filters if they are filled out beforehand and not afterwards. OR if not all filters are filled out, then nothing is displayed. It is similar to eBay is what I am trying to make.

1 Like

Ballpark, how many “things” are there in your database that you’re looking to search through? I ask because there are several solutions, but the ideal solution largely depends on the size of the list you’re searching.

21,763 and growing. Our users are adding items daily

Got it.

So, the Search&Autocorrect plugin won’t work for this. It requires you to load all of the data you want to search through to the page to be able to search it. So, it’s great (both easy to implement and effective) for small lists (up to maybe as much as 100 things) but not at all viable for something this large.

The easiest option to implement that is somewhat workable is to use a RG to display the results of a search. Then, you have to “Do a Search for” (and perhaps different conditions that change the search) to lookup values in the database whose, say, title includes the search-input-field’s value. As such, when people type in letters, it’ll update the “Do a search for” and show a different set of results. This works well in that you have complete control over the UI and it’s fairly simple to implement. The problem is that the search doesn’t include advanced search options and it’s also noticeably slow - and sometimes frustratingly slow. I should also point out, somewhere in the forum someone (I belive @NigelG) explains how to implement this in a way that’s case insensitive (which is essential for usability in my experience).

The harder to implement option is to use something like Algolia. We custom built a version and got it working (so time consuming to implement) but it’s everything we could want in a search tool - super fast, advanced search (e.g., case insensitive, search within words, and lots more). Additionally, @levon recently released a plugin for Algolia search so I suspect that makes it much easier to implement.

If search is a key capability for your site (and it sounds like it is from what I recall reading from you in previous forum posts), then I’d strongly encourage you to look into Algolia.

Thanks I will talk to Algolia and implement it

1 Like

Do you know a good post that will help walkthrough it. I am not a coder or developer. I spoke to someone at Algolia and they don’t really have a solution for Bubble users

Did you look at Levon’s plugin? I suspect he’s included some instructions. Additionally, there’s a thread called Search 2.0 that has a lot of information about how to do it, and a few others that are link to (or from) those two threads. That’s pretty much all of the content I’ve seen on it.

I’m told @levon’s plugin enables you to add a search field to your Bubble app. You’d still need to use the Bubble connector to pass the data to Algolia, but that’s entirely doable without code.

Additionally, @mishav published some code that you could copy and add to your app if you’re wanting to bring the data back in from Algolia and populate it within a repeating group. This route is more technical but can likely be done my someone who isn’t a coder, but you may need some knowledge of how javascript works.

Solution:

  1. You do not add any constraints to the Search and Autocorrect settings (Picture 2) ; you add them to the List of items Repeating Group by using “:filter” (Picture 1)

  2. Since my results appear automatically; I need to consistently press the magnify glass to show the results. So I suggest using a “Apply filter” button so the users understands to press the button to get the filtered results. See the pictures below to help you out (Picture 3)

  • My Apply Filter button is called “Test”


This youtube video will help set it up initially:

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.