struggling to get a 'tag input' form element with autocomplete

Dear Community:


The web appears to have a few options for tagged inputs: typeahead.js, tagsinput, and selectize.js. I thought it would be fun to play with this in Observable, but I can’t get anything working :frowning:

Neither typeahead.js or tagsinput.js seems to be under active development or current with Bootstrap 4. In trying to find a version that was, I eventually came across React Bootstrap Typeahead. I have never used React and remain very new to JS in general, and I started this help request trying to get this Reach component this working in Observable. Reading through all the posts and examples here, I realize it’s way over my head.

Toward a working UI – and refining my help request

I have been stumbling in trying to get different versions of tag inputs working in Observable. Here are links to some of my many attempts:

In all of these cases, I fail

I find 2 points in particular to be hard to understand:

1. If a module returns undefined in green, has it been loaded in Observable (and how to know this)?
2. How do I know what to do with the $ in that is used in HTML <script></script> elements?

On this second question – many of my notebooks seem to fail when they contain $. I have tried naming required modules as $, changing the $ to different module names (like jquery), etc, [check out the selectize notebook] but I am not getting anywhere.

Can someone please help explain some of these JS basics for me and how I can troubleshoot some of these basic stumbling blocks?

Any help would be greatly appreciated!

Thanks for your time and consideration.



So part of this may indeed be that I’m not getting the modules to load correctly?

I took a different tack and forked Tom’s Observable React Guide here:

I worked through the process of trying to load in the module as:

r = require.alias({
  react: "react@16/umd/react.production.min.js",
  "react-dom": "react-dom@16/umd/react-dom.production.min.js",
  "react-bootstrap-typeahead": "react-bootstrap-typeahead@3.2.4/lib/index.js"

… but failed: I get Typeahead = Error: invalid module with

Typeahead = r('react-bootstrap-typeahead')

I see that both react and react-dom have /umd/ in the path, so maybe I am missing something there?

Also, it is possible to load the module with Observable’s require:

react_bootstrap_typeahead = require('')

… but is this a different thing than loading the module as a React Component? Or should everything just play together?

Even as I try to progress by dropping in some code from the example, I get SyntaxError: Unexpected token for a pattern that I see throughout all of the examples.

Can anyone offer some further insights? I really appreciate your time and guidance!

More things for me to get my head around:

Getting closer… I found a simple Fiddle that demonstrate the functionality I’m after and ported it to Observable:

However, the example won’t work until i first add $ = in front of the and then delete it again.

I recall seeing a trick that Tom and Mike did somewhere to define the order in which modules load (using await), but that doesn’t seem to apply here – as there’s just one module? [Like when Mike showed how to port over C3.js]

Is $ not a useful means of referencing JS within Observable?

Try this:

1 Like

Thank you, Mike.

I appreciate all your help, guidance, and patience. This gets the basic UI example working. I’ll continue to play around from here. :heart:

1 Like