Lightning Fast Search / Search as you type with Typesense

[ahmed.khodeir.87]

Lightning fast search for bubble io

Typesense plugin for bubble io app add data to your bubble app

Typesense Plugin for bubble io app Create a Collection

Typesense Plugin for your bubble app add documents to your Typesense collection

Typesense Plugin for your bubble app Delete a collection

Typesense Plugin for bubble apps add or remove fields

Typesense Plugin for bubble Modifying an existing field

Typesense plugin for your bubble app Delete a document

typesense plugin for your bubble app display data sort by and pagination

If you are looking to improve your repeating groups’ performance when you search for items, or if you want to search millions of records in milliseconds but don’t want to pay a ton of money for Algolia’s expensive fees, you need to check Typesense Search engine ( Algolia’s cheap alternative )

If you’ve heard about ElasticSearch or Algolia, a good way to think about Typesense is that it is The much cheaper alternative of Algolia yet with the same Powers.

Try it out yourself:

https://typesenseplugindemo.bubbleapps.io/advance

and you can do much much more than this example with Typesense and instantsearch.js.

To integrate Typesense with your bubble app, you can use Typesense Plugin :

Typesense Plugin for Bubble, by Bublynova

which will enable you to do the following:

1. Create & Delete a collection (Data types) in your Typesense Cluster.
2. Add & Delete a document to a specific collection.
3. Update or Alter a Collection.
4. Modify an existing field.
5. Have a Custom search input that will search for records as you type.
6. Add Instantsearch.js widget for more customization to your search experience.

[dbevan]

Hey @ahmed.khodeir.87, we’re using your plugin (non-advanced solution) at the moment. It’s fantastic! Couple of points I’d like to raise.

1. We’re currently not in need of sorting or pagination but both divs are required to be visible on the page in order for Typesense to work. Is it possible for you to make implementing sorting and pagination optional on the plugin side?

2. Expanding from the question above, the Sort Label fields and 3 Sort By fields also seem to be required. Is it possible to make them optional as well?

Cheers,
Daniel

[ahmed.khodeir.87]

@dbevan all you need is to use the advanced connector ( we call it advanced because you can add or remove or modify any widget of instant search ) and within the "Search Widgets Code you just need to add the following “Keep”:

search.addWidgets([

//this is the widget needed to create a custom search and to enable bubble input to be the search inbox

customSearchBox({
container: “#search-box-id”
}),
configure({
hitsPerPage: properties.items_per_page
}),
]
);

Here is also a quick video of how it is done:

Typesense integration with bubble.io (Only use the search input)

[dbevan]

Great! Thanks for the quick response @ahmed.khodeir.87. I’ll reach out if I have further inquiries. Great work!

[ahmed.khodeir.87]

@dbevan Will be more than happy to support you anytime

[dbevan]

Just to provide an update, the Advanced solution is working perfectly. Your suggested changes have eliminated the need for me to provide unnecessary sorting and pagination divs. Cheers!

[ahmed.khodeir.87]

@dbevan that’s amazing please let me know if you needed any further assistance

[ahmed.khodeir.87]

@dbevan Update!
Now you can have a secure search experience using Typesense Plugin, by creating Secure Search Only API key “Scoped API keys”

[pachocastillosr]

Hi,

Can I use this plug-in as an action to do searches in backend workflows?

[ahmed.khodeir.87]

At the meantime NO, but we are working on such scenarios, once it is available we will update you.

But if your scenario is to hide some data from certain users, then you can do that via secured api search only keys which this plugin can create easily.

[ahmed.khodeir.87]

Sure thing!

[detrazvictor]

Hello Ahmed, fantastic plugin and thank you for that piece of work!

A quick question, would it be possible to update/modify fields in backend workflows? I sometimes have recursive workflows of hundreds of items where each item is modified/enriched by a API call.

Example: I want to find the email of 200 people, I run the API call in backend workflows directly for each of these people. Each of these 200 people email field is updated server-side.

It seems that this isn’t possible with Typesense, right? Do you think that it will be possible one day?

Another question, would it be possible to stil make the change happening server-side to my Bubble database and then re-synchronizing my Bubble DB to Typesense?

[ahmed.khodeir.87]

Hi @detrazvictor ,

Do you mean updating data from bubble’s DB to your Typsesne’s collection via Server-side actions?

[detrazvictor]

Yes that’s what I meant! and then displaying the result back to the RG with the data source being my Typesense’s collection

[gianluca2]

@ahmed.khodeir.87 , you did a great plug-in solving the miss search feature of Bubble. I have two questions:

1. I need user make search only in records (things in Bubble / document in TypeSense) they own. Is the right way trough your advance connector using some kind of filtering? Is it the key sent plain/visible?
2. Is it possible to highlight the text matched by the search (MARK attribute)

[ahmed.khodeir.87]

Hi @detrazvictor

For the server-side actions " For example updating a record" this is not done yet in the plugin, the only server-side action that exist right now is the " Secure API" but we intend to add the rest by the end of this month.

I will let you know once it is updated

[ahmed.khodeir.87]

Hi @gianluca2 ,

You can do that easily using the “Secure API” key, it can either be saved to the bubble.io DB with setting privacy rules, or just use it every time it is needed, where we recommend the 1st option.

The highlighting feature is not added yet to the plugin, it exist in Typesense of course, but we still didn’t do it nor documented how to do it using the plugin.

In case you needed any assistance in your development process, please share as much details as you can over here and I will do my best to respond as soon as possible

[gianluca2]

@ahmed.khodeir.87 , is there a way to avoid showing pagination fields? I see it’s possible to hide the group which contains the pagination items after page load, but in some case it’s better a simple interface…

[ahmed.khodeir.87]

Hi @gianluca2

Yes you can, all you need to do is to use advanced connector

And within the “Search Widgets Code” add all the widgets you need and avoid the ones you don’t need, so in this case you will remove the pagination widget that is shown in the following screenshot:

So the Pagination widget’s code that you will need to remove is :

pagination({           
              container: '#pagination',  
         
              cssClasses: {                          
                  root: 'MyCustomPagination',           
                  list: [                     
                      'MyCustomPaginationList',                                    
                      'MyCustomPaginationList--subclass',     
                  ],   
              },           
          }),

And now if you need to keep ( Search input + Refienment List + Sort By ) you will use the following widget’s Code:

search.addWidgets([

 //this is the widget needed to create a custom search and to enable bubble input to be the search inbox
     
customSearchBox({
              container: "#search-box-id"
          }),  
          
        
      
 //this is the refinement list widget so your users can filter by categories for example  
       
          refinementList({     
              limit: 10,     
              showMoreLimit: 50,     
              container: '#filters',     
              attribute: 'Genre',     
              searchable: true,     
              searchablePlaceholder: 'Search Genres',     
              showMore: true,     
              sortBy: ['name:asc', 'count:desc'],                  
             

 cssClasses: {       
                  root: 'MyCustomRefinementList',     
                  list: [       
                      'MyCustomRefinementListList',       
                      'MyCustomRefinementListList--subclass',     
                  ],   
              },                
          }),

                  
          sortBy({               
              container: "#sort-by-id",               
              items: [       
                  { label: "Default", value: "Movies_1000" },       
                  { label: "Low Rated", value: "Movies_1000/sort/IMDB Score:asc" },       
                  { label: "High Rated", value: "Movies_1000/sort/IMDB Score:desc" },            
              ],                  
              cssClasses: {                 
                  root: 'MyCustomSortBy',                 
                  select: ['MyCustomSortBySelect' ],     
                  option: [ 'MyCustomSortByOptions' ]                                    
              }                
          }),        
      
      

        configure({
            
          hitsPerPage: properties.items_per_page
            
        }),
        
        
        
      ]
    );

Hope that answered your question

[ahmed.khodeir.87]

To add any other additional Widgets of the Insteansearch widgets that is powering Typesense search and this plugin, you can visit the following site ( pagination | InstantSearch.js | Algolia ) to see where you get for example the pagination’s widget.

I know I didn’t do my best when it comes to documentation for the various scenarios that this plugin can be used for, but I will do my best to answer all your questions until I update and upgrade the plugin’s documentation very soon