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

**URL:** <https://talk.observablehq.com/t/struggling-to-get-a-tag-input-form-element-with-autocomplete/1484>\
**Category:** Help\
**Created:** [December 10, 2018, 6:09pm UTC](https://talk.observablehq.com/t/struggling-to-get-a-tag-input-form-element-with-autocomplete/1484 "2018-12-10T18:09:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [December 10, 2018, 6:09pm UTC](https://talk.observablehq.com/t/struggling-to-get-a-tag-input-form-element-with-autocomplete/1484/1 "2018-12-10T18:09:02Z")

</div>

Dear Community:

## Context:

The web appears to have a few options for tagged inputs: [**typeahead.js**](https://twitter.github.io/typeahead.js/examples/), [**tagsinput**](http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/), and [**selectize.js**](https://selectize.github.io/selectize.js/). I thought it would be fun to play with this in Observable, but I can’t get anything working ☹

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](http://ericgio.github.io/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:

- [tokenfield](https://beta.observablehq.com/d/e42f7b60f1048608)
- [tokenfield attempt v2](https://beta.observablehq.com/d/a8795efb015ca579)
- [typeahead](https://beta.observablehq.com/d/93ae1558e7111a7e)
- [bootstrap typeahead](https://beta.observablehq.com/d/10f2a44d9ff4f124)
- [selectize](https://beta.observablehq.com/d/5e84d56977504531)

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](https://beta.observablehq.com/d/5e84d56977504531) 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

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [December 11, 2018, 5:23am UTC](https://talk.observablehq.com/t/struggling-to-get-a-tag-input-form-element-with-autocomplete/1484/2 "2018-12-11T05:23:08Z")

</div>

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:

> **[React Bootstrap Typeahead - Revisited / Observable](https://beta.observablehq.com/d/46a7d4477a9f2aa2)**
>
> A better way to code.

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

```auto
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

```auto
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`:

```auto
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:**

- [Debugging React Components](https://talk.observablehq.com/t/debugging-react-components/844)
- [Semiotic in Observable](https://beta.observablehq.com/@tmcw/semiotic-in-observable#req)
- [Conversation between Tom & Mike w/ Dan Abramov](https://github.com/facebook/react/issues/12928)

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [December 11, 2018, 9:21pm UTC](https://talk.observablehq.com/t/struggling-to-get-a-tag-input-form-element-with-autocomplete/1484/3 "2018-12-11T21:21:14Z")

</div>

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

> **[Selectize.js / Observable](https://beta.observablehq.com/d/df5fec539a0ea090)**
>
> A better way to code.

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](https://talk.observablehq.com/t/why-will-a-graph-render-after-running-function-but-not-on-load/1033)]

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

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [December 11, 2018, 10:14pm UTC](https://talk.observablehq.com/t/struggling-to-get-a-tag-input-form-element-with-autocomplete/1484/4 "2018-12-11T22:14:08Z")

</div>

Try this:

> **[Comparing ‘Selectize.js’ by Aaron Kyle Dennis to ‘Selectize - Fiddle Port’ by...](https://beta.observablehq.com/compare/df5fec539a0ea090...71ff07ef2ed6cf8a)**
>
> A comparison of two Observable notebooks.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [December 11, 2018, 10:17pm UTC](https://talk.observablehq.com/t/struggling-to-get-a-tag-input-form-element-with-autocomplete/1484/5 "2018-12-11T22:17:56Z")

</div>

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. ❤