Forum Academy Marketplace Showcase Pricing Features

Making tweet-like input with hashtags & autohighlighting - Paid help welcome!

Hello Everyone,

I’ve spent 3 days on this and really would love someone to guide me on how I can do this in Bubble - happy to pay for an hourly session with a Bubble developer.

I’m trying to create a custom input like this:

Here are the main features of this input:

  • Automatically colors custom hashtags (starting with $), @mentions and normal hashtags (#) as blue
    -When a user types an @mention or $hashtag, a dropdown list appears with choices of users or pre-defined hashtags from the Bubble DB to choose from
    -When the user enters more than 250 characters, the extra text turns red

What I’ve learned so far in my research:

  • Bubble uses the HTML 'textarea’ element for the multiline input element. ‘textarea’ elements do not support inline styling, so there is no way to change the color of select words inside using the multiline input element
    -What I need is a ‘div’ of type ‘contenteditable’ to achieve the above look. I can use the built-in HTML element in Bubble to achieve this. So far so good.
    -I also need custom javascript for the above
    element to parse and detect the hashtags & @mentions in real-time.
    -I have found many pre-built jquery, react, and javascript libraries to do this

This is where I’m stuck. How can I import or use a pre-built javascript library in Bubble? Do I need to create a plugin? Or is there a way to integrate the JS code without a plugin?

If there’s any developers out there who can help me build this out for a reasonable paid fee please let me know. I have found the library I want to use for this, just need some help importing into Bubble.

Thanks so much!

~ Maryam

@wegetdesign built something similar you might want to ask @omar3

2 Likes
2 Likes

Thank you so much @nocodeventure :pray: On first glance it seems like the WDG plugin should take care of the mention and hashtags, I will need to try it out to see if it can handle all 3 (@, # and $) at the same time.

Hey @maryamahmed007 !
@minimumstudio is launching a new plugin soon that will let you create several tags in an input element. Think of tagging users, hashtags, pages, topics, etc.
It will support up to 3 different DB types!

It’s currently under review so hopefully it will be out soon! The name is Tagify.

Hi @Daan Great that’s awesome - 3 is all I need! Really looking forward to it as this feature is a huge blocker for me at the moment.

In addition the other main question is:

  1. Will it scale to tens of thousands of users/objects in the DB? Some excellent questions & suggestions on this thread (like only loading matches when 1 or more characters have been typed etc.) and not loading all objects on page load.