Implementing Autocomplete UI plugin to an input field

[boonier]

Hi there

I've created a working autocomplete plugin as per your very useful guide, but I realise that its functionality is tied to the main editor. What would I have to do if I wanted to attach this plugin to an input dialog component? Is this even possible?

I'd envisage being able to hook of a selector and render the results below this input, but the name field doesn't seem to propagate to the input rendered in the DOM:

<input type="text" placeholder="Search for..." tabindex="-1" data-alloy-tabstop="true" class="tox-textfield" id="form-field_4414056161651582650008460">

Do I need to create a new custom input component? Perhaps I'm conflating the use of the autocomplete plugin with it being able to be used in the editor and dialogs. I should add that I'm using TinyMCE within a React app, but it seems logical that this functionality should stay within TinyMCE.

Any advice would be much appreciated.

thank you Si

[martyf]

Hi Si,

It is my understanding that the autocomplete is for the editor typing, not for using on additional fields such as inputs in dialogs.

You might like to suggest this to the Tiny team as it may be something they could consider implementing? The issue is that the current autocomplete behaves in a different way to a standard input-based autocomplete. In Tiny, you have a trigger key that starts the process, where as for an input, it is any typing. So similar, but not quite, so I'm unsure how easy it is for them to try to do this.

Otherwise, a selectbox is an element that is available as a Dialog Component, however that behaves just like a standard selectbox, not an autocomplete. So great for small lists, but not so great for lookups.

An alternative is to actually create your own page somewhere that can handle your own UI components (including your own autocomplete implementation), and embed that in to the dialog. While it becomes your responsibility to match UI consistency and a good UX, it at least would allow you to do what you need it to do.

Hopefully this helps

[boonier]

Hey Marty

Thanks for getting back. That confirms what I suspected, but you're right it would be a handy feature to suggest.

As it happens, I've since actually approached this from the React angle instead - the tinymce-react wrapper exposes a bunch of events that I can hook into and manage a dialog on that side. Which is good, since I've already made a bunch of dialogs for the app and the autocomplete functionality is elsewhere. I thought I'd have to duplicate the same functionality for the editor.

Will let you know how I get on!

cheers