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

Community Help
1

Dear Community:

Context:

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.

Sincerely,

Aaron

2

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('https://bundle.run/react-bootstrap-typeahead@3.2.4')

… 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:

3

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 selectize.md.js 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?

4

Try this:

1 Like
5

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