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

【问题标题】：how to reference typeahead and bloodhound when loading npm typeahead.js加载 npm typeahead.js 时如何引用 typeahead 和 Bloodhound
【发布时间】：2015-06-10 08:22:48
【问题描述】：

我已经使用 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>
    )
  }
})

【问题讨论】：

在github.com/twitter/typeahead.js 中阅读，Bloodhound 似乎与 Typeahead 一起出现。这是你安装的吗？
@fedorqui 是的，就是这样
我不记得我是如何让它工作的，但我也遇到了 Bloodhound 的一些问题，我自己解决了。见Update JSON on every keyup for twitter typeahead

标签： typeahead.js

【解决方案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")

【讨论】：

我开始使用 react-typeahead，所以我没有测试您的解决方案，但它是有道理的 - 谢谢！

【解决方案2】：

对于最近遇到此问题的任何人，该库的捆绑版本不再随包一起提供，无论您如何加载它。

要解决这个问题，只需单独要求 Bloodhound 软件包。您还需要将此绑定到 Bloodhound 变量。

如果像我一样，您使用 webpack 或外部的东西，那么您可能需要将其绑定到 window。

所以，首先安装包：

npm install bloodhound-js --save

然后需要它（您可能不需要window 绑定）：

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

【讨论】：

【解决方案3】：

这是捆绑文件中代码顺序错误的问题。请看我在这里提交的问题：https://github.com/twitter/typeahead.js/issues/1546

【讨论】：