Lightning Fast Search / Search as you type with Typesense

Typesense Plugin has a New updated version 1.3.0 where you can now use all the actions as Server-Side Actions @gianluca2 , @dbevan , @pachocastillosr .

Please let me know if you needed any assistance :slight_smile:

We are now working on improving our documentation with various scenarios and showing the use of insteansearch.js widgets :slight_smile:

I will update this thread as soon as we release any more updates, stay tuned!

2 Likes

You can now create your own custom sot by dropdown menu using bubble elements with out the need for instantsearch.js widget of sortBy :wink:

1 Like

Typesense Plugin Powered - Example 01:

Hi @pachocastillosr I am about to release the new upgrades to the Typesense Plugin including your request for search Action, and Highlighting capabilities too @gianluca2 :slight_smile: , I am working on improving the elements and the actions, plus how to use them “documentation” , once it is done “by next week - fingers crossed” I will update you :slight_smile: , please feel free to let me know if you needed anything else :slight_smile:

1 Like

Hi, @ahmed.khodeir.87 , since I needed that in January, I ended up doing it by myself. Anyways, your plugin seems very complete so I might give it a try if I need any of the other capabilities. Thanks!

Looks great! Quick question, is there a way to enable semantic search through the plugin? I currently do it through regular API connection

Hi @daniel.jacques ,

Not yet, But I will keep adding more and more features as we go.

The main focus now is Supporting current users of the Plugin, improving the Plugin’s Documentation, and showing more live examples very soon.

I will keep you updated once we release the semantic search capability in the Plugin :slight_smile:

Check out novyPro.com a community platform Powered by Typesense :heart_eyes:

Followers, Likes, Custom sortBy, Custom Search input, RG without search inputs, special secured keys for each member of the +10K members of the Platform running seamlessly :wink:

@ahmed.khodeir.87

Hello,

I am trying to seamlessly upload data toTypesense from an API response using the bubble API connector and typesense plugin.

My instinct is telling me that this is possible using back end workflows but I am having trouble with the architecture sequential layout.

Anyone know if this is possible and the process for success.

Please let me know.

Thanks,

Gabriel

Dear @Jibbystyle ,

sorry for the late reply.

Please check out what you can do with Typesense and our Plugin “till date | More improvements are coming soon”:

Benefits:

  1. Search as you Type | Lightning Fast.
  2. Add any instantsearch.js widgets seamlessly.
  3. Server-Side Actions (Create, Update, Delete, etc.)
  4. Add More Power to SortBy (Add more than just three Sorting by elements | use “Ts Connector Advanced 02” )
  5. Multi-Search | Federated Search of up to 5 Collections at the same time on the Same Page

Actions - Client Side - (Admin Key & Nodes Host are HIDDEN):

  1. (Create-Collection) - ClientSide
  2. (Update-Collection) - ClientSide
  3. (Delete-Collection) - ClientSide
  4. (Modify-Collection’s Field) - ClientSide
  5. (Create-Doc-Single) - ClientSide
  6. (Upsert-Doc-Single) - ClientSide
  7. (Update-Doc-Single) - ClientSide
  8. (Emplace-Doc-Single) - ClientSide
  9. (Create-Doc-Multi) - ClientSide
  10. (Upsert-Doc-Multi) - ClientSide
  11. (Update-Doc-Multi) - ClientSide
  12. (Emplace-Doc-Multi) - ClientSide
  13. (Delete-Doc-Single) - ClientSide
  14. (Delete-Doc-Multi) - ClientSide
  15. (Create-AdminKey) - ClientSide
  16. (Create-SearchKey) - ClientSide
  17. (Start-Search) - ClientSide
  18. (Delete-API Key) - ClientSide
  19. (Get-API Key) - ClientSide
  20. (List All API Keys) - ClientSide

Actions - Server Side:

  1. Typesense-(Create-Collection)-ServerSide
  2. Typesense-((Update-Collection)-ServerSide
  3. Typesense-((Delete-Collection)-ServerSide
  4. Typesense-((Modify-Collection’s Field) - ServerSide
  5. Typesense-((Create-Doc-Single)-ServerSide
  6. Typesense-((Upsert-Doc-Single)-ServerSide
  7. Typesense-((Update-Doc-Single)-ServerSide
  8. Typesense-((Emplace-Doc-Single)-ServerSide
  9. Typesense-((Create-Doc-Multi)-ServerSide
  10. Typesense-((Upsert-Doc-Multi)-ServerSide
  11. Typesense-((Update-Doc-Multi)-ServerSide
  12. Typesense-((Emplace-Doc-Multi)-ServerSide
  13. Typesense-((Delete-Doc-Single)-ServerSide
  14. Typesense-((Delete-Doc-Multi)-ServerSide
  15. Typesense-((Create-AdminKey)-ServerSide
  16. Typesense-((Create-SearchKey)-ServerSide
  17. Typesense-((Delete-API Key)-ServerSide
  18. Typesense-((Get-API Key)-ServerSide

Also, check out novyPro.com which is my own startup where I am now using Typesense for any RG and all my actions are “Server-side”

Hello,

Yes. I am aware of the capabilities that is why I am excited to be using it. I am setting up a back end workflow and trying to get the data from an API call using Bubble API connector into Typesense by using the Plugin. I’ve been working on this for 3 days and can’t seem to get it right. I am new to back end workflows as well and I look at my scheduler and it never fires off for some reason to even test the workflow.

I am struggling with initializing the call for some reason but I think I have the architecture close to correct.

Can you take a look at these screenshots and let me know what I am doing wrong ?

Hi @Jibbystyle ,

If you are trying to upsert single document each time then:

  1. Make the parameters that you are sending to be " 's first thing’s item" instead of " each item’s…"
  2. Try using ( Typesense-(Upsert-Doc-Single)-ServerSide ) instead of ( Typesense-(Upsert-Doc-Multi)-ServerSide )
  3. When you call it in the “Upsert” action, make sure to collect the ImageURL’s URL which is type (Text=string ), since you can’t send images to Typesense and you can only send strings.

If you want to send multiple documents:

You can use the same action ( Typesense-(Upsert-Doc-Single)-ServerSide ) but in a recursive worflow, or use ( Typesense-(Upsert-Doc-Multi)-ServerSide ) but you must make it in away that each documents’ schema in a seperate line for example:

{“id”:“123456”, “imdbId”:141414, “Imdb Link”:“Imdb Link.com”, “Title”:“NewCreated01”, “Poster”:“Poster01.com”, “IMDB Score”:4.6, “Genre”:[“Comedy”, “Drama”]}
{“id”:“1234567”, “imdbId”:151515, “Imdb Link”:“Imdb Link.com”, “Title”:“NewCreated02”, “Poster”:“Poster02.com”, “IMDB Score”:6.6, “Genre”:[“Comedy”, “Drama”, “Action”]}

@Jibbystyle I can get into a quick online call now with you if you want so I can have better look and understanding of how we can achieve what you want if you wish.

Hello,

Ok. I updated the initial API call from Image to Text for that URL.

Even if I have multiple documents I should use Doc Single ?

I spoke with typesense and they said on larger imports that might time out.

I will make the adjustment and then try again.

How do I trigger a workflow event in Bubble ? I can’t seem to figure out how to initialize a back end workflow and have it show in my scheduler. Any advice ?

Thanks,

Gabriel

Is it possible to upload an actual document like a CSV or a file containing all the JSON data of my items?

Hi there.

I’m in a bind, because I followed the tutorials on Youtube and the documentation, but to display data in a Repeating Group, I need TS Filed Reader, and I don’t have it. However, I’m using the latest version of the plugin.

Can you please help me?
Capture d’écran 2023-10-03 à 10.14.07

Dear @mick.bourgois ,

Unfortunately, our current docs are out of date, we are currently working on making a better UX for our docs.

In the meantime, please let me know what exactly are you trying to achieve and I will respond here within this thread :slight_smile:

I’ve created a “Collection” via an API request called “Shops” in my cluster.
From Bubble, I’ve added “Documents” to this collection, thanks to a Bulk and Backend Worklow, so I do have my Documents in my Collection in my Cluster.

I’d like to display these Documents in a Repeating Group, with a search bar and navigation.
So I’ve created an RG, added the Ts-SS-Connector A to my page, and designated a source for my RG which is an API request ([cluster]/collections/[collection-name]/documents/search).

However, my RG remains empty.

Hi.
I am looking for a fuzzy search plugin that can lookup in my database any element that has any of the elements from another search as a foreign key. Is this plugin able to do it?
Thanks!

@ahmed.khodeir.87 are you replying? We can do a visio call or loom if you want?

  1. Add an input within the page let’s call it “Search Input”.
  2. Add an ID Attribute “search-box-id” or any other ID Attribute you want.

  1. Add the Typesense Plugin’s Single Search Connector “Ts-SS-Connector” to the page and let’s name it “Ts-SS-Products”, and make its width 100px and height 100px with a background of any visible color

This has nothing to do with the connector’s code, it is just useful for following steps

  1. Go to “Ts-SS-Products” and add the following:
    4.a- Value type: text
    4.b-Collection Name: Your Products Collection’s Name.

Can be found in your Typesense Cluster, Select the Collection from the dropdown, go to Collection Settings, and then from there get the exact name of your Collection

4.c-Search Only API Key, You can either use your Master Admin API Key “NOT RECOMMENDED”, Or Create a Search Only API Key for that specific Collection.

To create a New Search Only API Key, Go to API Keys, And Use the following:

{
  "description": "SearchProductsKey",
  "actions": [
    "documents:search"
  ],
  "collections": [
    "Products"
  ]
}

And Make sure to Save that Search Only API Key somewhere secure, or within your bubble’s DB.


4.d-Add your Node (Host), to find it go to Overview, Then select the part until …typesense.net

4.e- Nodes (Port): 443

4.f- Nodes (Protocol): https

4.g- Search Input Value, Can be left empty if you will use the “Search Input”, or ( “*” ), or even a Dynamic Value, But for now let’s leave it empty.

4.h- Query By: Let’s Use Product’s Name for Naow and later you can use other fields to query by (i.e. Product Name, Category, Seller Name )

4.i- infix: Let’s make it as “always” for now, but when you use multiple Query By in the future, you must add their infix status too (i.e. Product Name, Category, Seller Name === always, off, off )

4.j- sortBy: Let’s assume that you have a rating for each Product which was identified within your collection’s schema, so it will be : Product Rating:desc )


4.k- Items Per page: I recommend not using more than 30, and the max is 250 per page, and later I will show you how to add pagination.

4.L- Prefix: yes

4.m- Filter By can be left empty for Now, but later you can create your own custom filters and use dynamic values in this input.

  1. n- Now for the Search Widget Code use the following:

search.addWidgets([

customSearchBox({
container: “#search-box-id”,
}),
pagination({
container: ‘#pagination’,

          cssClasses: {                          
              root: 'MyCustomPagination',           
              list: [                     
                  'MyCustomPaginationList',                                    
                  'MyCustomPaginationList--subclass',     
              ],   
          },           
      }),
  ]
);

image

  1. Now add a Group Element and Call it “Ts-SS-Pagination” for example, and give it an ID Attribute of “pagination”, remember it is just a Group Element that acts as a Div, don’t use Repeating Group"

  2. Now Preview this Page in debug Mode, and Click on “Inspect” Button on the right bottom corner.

  1. Now Click On the “Ts-SS-Connector”, then the Documents schema will appear below as shown in the following screenshot:

  1. Now Select the JSON Text of that Document from {" to…"} , remember to select the whole Document text nothing more and nothing less.

  1. Open a Note document and Just Save that Document’s text to it, we will need it in a second:

  1. Now Go to your Plugin’s Tab, then Go to your “API Connector” Plugin

I assume you has it installed, if not you will need to install it


  1. Now Let’s Add another API that will contain all your Typesense Documents’ structure and let’s call it “Marketplace”, and let’s also add an API Call ( GET/DATA/JSON) and let’s call it “Ts-Products”, and Click on Manually enter API response…



12.a- Now remember that Document schema we saved on the Note’s document?.. copy that and Past it in the “Manually enter API response” Popup

If the Save Button is Not activated, that means that the returned value is incorrect, in this case, we recommend using the Most Complete document from the returned documents that were inspected earlier using the bubble’s inspector, it is common to have incomplete documents in your Collection, but for the sake of creating the Document structure Now, we need a complete Document that all it’s fields are NOT empty within the Typesense’s collection.

  1. Now search for the Complete Document and Grab its schema as shown before, and add it to the “Manually enter API response” Popup and it will look like this:

  1. Now Just press Save, Make sure all Data Types are as you need them to be “Specially Dates”, and hit Save, Now You have a virtual Data Type in your app that can identify the Typesense Documents returned from your collection.

  1. Now Copy the Name of the newly added data type “Ts-Products” and go back to the Same page you were working on, Click on the “Ts-SS-Connector”, and change the “Value Type” from text to “Ts-Products”

image

  1. Now Insert a Repeating Group within your page, and Make its Type of content as “Ts-Products” , and the Data Sources to be " Ts-SS-Connector’s value list "

And that’s it, now you can display every document’s field from Your Typesense’s Collection :wink:

Hope that was helpful, let me know if you need any further assistance, I will do my best to assist as soon as possible.