如何在加載npm時引用typeahead和bloodhound typehead.js

Question

我已經使用npm安裝了typeahead.js。從我讀到的這個包括typehead和bloodhound。

然後，我需要它後，我的模塊中需要jQuery。

但現在當我打電話

new Bloodhound() 

尋血獵犬是（理解）不確定。

我只能找到包括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應該同時提供與事先鍵入的內容一起尋血獵犬，但它似乎並沒有加載VI時提供訪問警犬像你提到的一個節點。

一個解決辦法是導入和事先鍵入的內容分別尋血獵犬（NPM相同封裝）：

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

Answer 2

這是包文件的代碼順序錯誤的問題。請參閱我在此處提交的問題：https://github.com/twitter/typeahead.js/issues/1546

Answer 3

對於最近遇到此問題的任何人，無論您如何加載它，該庫的捆綁版本都不再隨附該包。

要解決這個問題，只需要單獨的Bloodhound包。您還需要將其綁定到Bloodhound變量。

如果像我一樣使用webpack或外部的東西，那麼你可能必須將它綁定到window。

因此，首先安裝軟件包：

npm install bloodhound-js --save

然後需要它（你可能不需要window綁定）：

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