typeahead.js - 加载 npm typeahead.js 时如何引用 typeahead 和 Bloodhound

Question

我已经使用 npm 安装了 typeahead.js。根据我的阅读，这包括预输入和猎犬。

然后我在我的模块中需要 jquery 之后需要它。

但现在当我打电话

new Bloodhound()

Bloodhound 是(可以理解的)未定义的。

我只能在 html 的脚本文件中分别找到包括 bloodhound.js 和 typeahead.js 的示例。

如何通过要求 npm 来做到这一点？

以防万一:这是我的完整模块:

/*
* 获取所有对象
* 构建过滤器组件所需的对象数组，以创建可过滤对象列表
* 返回过滤器组件
*/
'使用严格'

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

Answer 1

文件typeahead.bundle.js应该同时提供Typeahead和Bloodhound，但是像你提到的那样通过Node加载时似乎没有提供对Bloodhound的访问。

一种解决方法是分别导入 Typeahead 和 Bloodhound(相同的 NPM 包):

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