Jquery Plugins in React Browserify mit

Question

Ich baue eine Komponente reagieren, die Devbridge's AutocompletejQuery Plugin benötigt. Das Problem ist, wie man das Plugin über npm lädt. Früher habe ich bereits this suggestion gesehen:

import React from 'react'; 
global.jQuery = require('jquery'); 
require('autocomplete'); 

class Search extends React.Component{ 
    componentDidMount(){ 
    let id = this.props.clientId; 
    jQuery(function(){ 
     jQuery('#autocomplete').autocomplete({ 
      serviceUrl: `https://api.soundcloud.com/tracks?client_id=${id}`, 
      onSelect: function (suggestion) { 
       // this.props.handleSearch(suggestion); 
       console.log(suggestion); 
      } 
     }); 
    }); 
    } 
    render() { 
    return (
     <div className="search"> 
     <input type="text" name="tracks" id="autocomplete"/> 
     </div> 
    ); 
    } 
} 

export default Search 

... und haben die folgenden in meinem package.json:

"browser": { 
     "autocomplete": "./node_modules/devbridge-autocomplete/dist/jquery.autocomplete.js" 
    } 

... aber ich halte die folgende Fehlermeldung erhalten:

Uncaught TypeError: jQuery(...).autocomplete is not a function 

Answer 1

Ich denke, dass Sie die jquery-ui.js hinzufügen müssen, um die Autocomplete-Box zu laden, die ich gerade geladen habe js und unter dem Code

implementiert

var Parent=React.createClass({ 
    componentDidMount:function() 
    { 
     var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 
    $("#autocomplete").autocomplete({ 
    source: availableTags 
    }); 
    }, 
    render:function() 
    { 
    return(
     <div> 

     <input type="text" name="tracks" id="autocomplete" placeholder="enter text start from any coding language " style={{"width":"400px;"}}/> 
     </div> 
    ) 
    } 
}); 

Demo