how to reference typeahead and bloodhound when loading npm typeahead.js

Question

I have installed typeahead.js using npm. From what I read this includes typeahead AND bloodhound.

Then I require it after requiring jquery in my module.

But now when I call

new Bloodhound()

Bloodhound is (understandably) undefined.

I can find only examples including bloodhound.js and typeahead.js separately in script-files in html.

How can this be done by requiring from npm?

Just in case: here is my complete module:

/* * gets all objects * builds an array of objects needed by the filter component to create the list of filterable objects * returns the filter component */ 'use strict'

import $ from 'jquery'
import React from 'react'
import 'typeahead.js'

export default React.createClass({
  displayName: 'Filter',

  propTypes: {
    data: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
  },

  componentDidMount () {
    const objects = this.props.data
      .map(function (object) {
        // make sure every fauna has a name
        // dont use others for filtering
        if (object.Taxonomie && object.Taxonomie.Eigenschaften && object.Taxonomie.Eigenschaften['Artname vollständig']) {
          return {
            id: object._id,
            label: object.Taxonomie.Eigenschaften['Artname vollständig']
          }
        }
      })
    const fauna = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace('label'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: objects
      })
    $('#bloodhound .typeahead').typeahead({
      minLength: 3,
      highlight: true
    },
    {
      name: 'fauna',
      valueKey: 'label',
      limit: 20,
      source: fauna
    })
  },

  render () {
    return (
      <div id='bloodhound'>
        <input className='typeahead' type='text' placeholder='filtern'/>
      </div>
    )
  }
})

Reading in https://github.com/twitter/typeahead.js/ it looks like Bloodhound comes together with Typeahead. Is this the one you installed? — fedorqui, Jun 10 '15 at 08:25
I cannot remember properly how I managed to make it work, but I had some issue also with Bloodhound and I solved myself. See [Update JSON on every keyup for twitter typeahead](http://stackoverflow.com/q/27347121/1983854) — fedorqui, Jun 10 '15 at 13:56

score 10 · Accepted Answer · answered Sep 10 '15 at 09:55

10

The file typeahead.bundle.js is supposed to provide both Typeahead and Bloodhound together, but it doesn't seem to provide access to Bloodhound when loading via Node like you mentioned.

A work around is to import Typeahead and Bloodhound separately (same NPM package):

require("typeahead.js/dist/typeahead.jquery.min.js")
Bloodhound = require("typeahead.js/dist/bloodhound.min.js")

answered Sep 10 '15 at 09:55

Luke Hansford

565
1
8
24

1

I moved to using react-typeahead so I did not test your solution but it makes sense - thanks! – Alex Sep 10 '15 at 14:12

score 4 · Answer 2 · answered Jun 23 '17 at 14:12

For anyone encountering this issue recently, the bundled version of the library no longer comes with the package, regardless of how you load it.

To get around this, just require the Bloodhound package separately. You'll also want to bind this to the Bloodhound variable.

If, like me, you're using webpack or something external then you might have to bind it to window.

So, first install the package:

npm install bloodhound-js --save

Then require it (you might not need the window binding):

window.Bloodhound = require('bloodhound-js');

score 1 · Answer 3 · answered Aug 03 '16 at 11:04

1

This is an issue of wrong order of code in the bundle file. Please see the issue that I submitted here: https://github.com/twitter/typeahead.js/issues/1546

answered Aug 03 '16 at 11:04

Tacaza

539
1
4
12

how to reference typeahead and bloodhound when loading npm typeahead.js

3 Answers3