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>
)
}
})
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):