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>
)
}
})
Bloodhound is the typeahead. js suggestion engine. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.
The typeahead input fields are very popular in modern web forms. The main purpose of using typeahead is to improve the user experience by supplying hints or a list of possible choices based on the text they've entered while filling a form or searching something — like the Google instant search.
Performs search to retrieve list of places by input text and location vicinity. Address Autocomplete takes free form text as input. It could be a part of an address. Location could be provided either as latitude/longitude or as country ISO code. It returns consolidated list of addresses based on the input text.
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")
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');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With