Forum Documentation Showcase Pricing Learn more

[NEW PLUGIN] Keystroke Input Trigger

Keystroke Input Trigger (Plugin Page)

Triggers a workflow as you type individual keystrokes into an input or a set time after you’ve stopped typing. Unlike bubble’s ‘on input change’ trigger, the plugin will trigger a workflow on any real-time change to an input without the need to click outside of that input field.

Adjustable timeout lets you define how long between keystrokes the workflow should trigger.

DEMO PAGE

Was built as a problem-solver for my own app and it seemed worthwhile to share.

Enjoy!

EDIT:
Quick question to any plugin devs stumbling across this thread: How do you deal with placeholder images? Bubble recently upgraded how plugins render inside the editor, but also simultaneously removed the simplified way to upload a static placeholder image. I attempted recreate their Jquery example and it did not work…

10 Likes

Dude, this is amazing! Great merge between autobind and on input change.

1 Like

Thank you for your effort, but can you give an example where it can be used?

Thanks! It seemed like an obvious need and a straightforward solution. I was surprised that this hadn’t been done already. Given how crappy the search inside the plugin tab is, I’m not convinced someone hasn’t built a plugin that can do this already :wink:

Side note:
I feel like I should mention, that there are many scenarios in bubble (more than one may first realize) that do not require a plugin like this. Between the ‘conditional’ tab, triggering workflows based on page conditionals and using Input’s value inside a data source you can get a lot of the ‘real time’ interaction on a page with your input field as you type without a plugin like this.

That being said, depending on your project, there can be a very real need for this.

Bubble auto binding doesn’t update changes inside the text input field to your database until you click out of that field on the page and cause it to loose focus. Real world scenario: Let’s say you had a long input field in your page and the user was typing in a paragraph or more of information. That information is not saved in the database until the user clicks out of the field. If they were to say shut their laptop and it ran out of battery and shut down (forcing the browser to close) unlike, say gmail, their input would not have been saved.

2 Likes

BTW, there is a sound reasoning for keeping with this standard update behavior. I would caution anyone from repeatedly writing to the db while they type without understanding the implications of that :slight_smile:

1 Like

Nice work @jon2 :+1:

I’ve changed the topic of this post to ‘Showcase’ as this fits in better, hope thats okay.

2 Likes

It’s usefulness is great for searches.

2 Likes

There might be other ways to do it, but what I found works is uploading the placeholder image in the plugin’s Shared tab under Shared assets and resources and then adding the following to the element’s preview function. (Play around with width and height if you want different dimensions or for it to be resizable.)


function( instance, properties )
{
    var img = $('<img>').attr('src','//dd7tel2830j4w.cloudfront.net/f1564848404485x678477926193473200/my-placeholder.png');
    img.css({
        position   : 'absolute',
        width      : 60,
        height     : 60
    });
    instance.canvas.append( img );
}

The closest thing I’m aware of is AirDev’s Instant Text plugin. The delay is not configurable though; it’s just instantaneous as you type.

I also developed something similar for my own internal use. Not sure yet if I’ll release it to the marketplace.

Nice job with the plugin. :slightly_smiling_face:

2 Likes

Thanks!

Absolutely. That was the initial motivation for building it. I’ve found though, that I’ve been able to build some fairly decent ‘real-time’ search capabilities (of the db at least) using the built-in functions available in the editor.

That did it.
Thanks!

I understand why the new live plugin preview is better, but it’s frustrating that @bubble removed a working feature, didn’t document it, and left users to figure this out.

If you review nearly any plugin you’ll see that the page elements render correctly in the editor with a static placeholder image, however when you look at the code there is nothing under the preview section and no placeholder. Thats broken.

I tried it this morning, but it doesn’t seem to be more responsive than the input’s existing workflow, no matter what timer value I used. It also doesn’t trigger the function to watch workflows step-by-step once I started typing. I was saving its output as two states in a group (the output as text as well as the output’s text’s character count), but I think I couldn’t see the variables getting updated when using the ‘inspect’ function. It did work and I used a workflow like in your example. I might try it again in a separate page to see if that has an effect.

I’m not sure what you are referring to by ‘existing workflow’? If you have an existing workflow that works (without this plugin), then its unlikely that this plugin will give you some sort of increased performance. I’d take a look at the plugin page for a detailed description of the features.

Maybe someone can help me out here, but I believe this is a bubble limitation? I don’t believe bubble allows step-by-step inspection of a workflow that was triggered after page load by either a condition or a page plugin triggering an action… At least I’ve not experienced this working before.

Thanks!

  • Added a ‘currently typing’ yes/no state. This fires yes on a key down press and then reverts back to no after an independently adjustable timeout period.
  • Added a ‘start typing’ trigger which occurs on the first down keystroke. Has a separate adjustment for timeout after typing stops before firing again. Also allows for repeats if set to 0.

Might be useful for a chat status, conditionally visible elements, etc. demo page

2 Likes