perf: optimise search and autocomplete

package.json

@@ -17,7 +17,6 @@
     "@fontsource/montserrat": "^4.5.0",
     "@material-ui/core": "5.0.0-beta.0",
     "@material-ui/icons": "5.0.0-beta.0",
-    "fetch-jsonp": "^1.1.3",
     "react": "17.0.2",
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",

src/components/helpers/autocomplete/Autocomplete.jsx

@@ -7,14 +7,12 @@ export default class Autocomplete extends React.PureComponent {
     super(props);
     this.state = {
       filtered: [],
-      showList: false,
       input: ''
     };
-    this.enabled = (localStorage.getItem('autocomplete') === 'true');
   }
 
   onChange = (e) => {
-    if (this.enabled === false) {
+    if (localStorage.getItem('autocomplete') !== 'true') {
       return this.setState({
         input: e.target.value
       });
@@ -22,7 +20,6 @@ export default class Autocomplete extends React.PureComponent {
 
     this.setState({
       filtered: this.props.suggestions.filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1),
-      showList: true,
       input: e.target.value
     });
 
@@ -32,7 +29,6 @@ export default class Autocomplete extends React.PureComponent {
   onClick = (e) => {
     this.setState({
       filtered: [],
-      showList: false,
       input: e.target.innerText
     });
 
@@ -42,20 +38,19 @@ export default class Autocomplete extends React.PureComponent {
   render() {
     let autocomplete = null;
 
-    if (this.state.showList && this.state.input) {
-      if (this.state.filtered.length && localStorage.getItem('autocomplete') === 'true') {
-        autocomplete = (
-          <ul className='suggestions'>
-            {this.state.filtered.map((suggestion) => {
-              return (
-                <li key={suggestion} onClick={this.onClick}>
-                  {suggestion}
-                </li>
-              );
-            })}
-          </ul>
-        );
-      }
+    // length will only be > 0 if enabled
+    if (this.state.filtered.length > 0 && this.state.input.length > 0) {
+      autocomplete = (
+        <ul className='suggestions'>
+          {this.state.filtered.map((suggestion) => {
+            return (
+              <li key={suggestion} onClick={this.onClick}>
+                {suggestion}
+              </li>
+            );
+          })}
+        </ul>
+      );
     }
 
     return (
@@ -64,7 +59,6 @@ export default class Autocomplete extends React.PureComponent {
           type='text'
           onChange={this.onChange}
           value={this.state.input}
-          name={this.props.name || 'name'}
           placeholder={this.props.placeholder || ''}
           autoComplete='off'
           id={this.props.id || ''} />

src/components/widgets/search/Search.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
-import fetchJSONP from 'fetch-jsonp';
 
 import AutocompleteInput from '../../helpers/autocomplete/Autocomplete';
 
@@ -64,13 +63,22 @@ export default class Search extends React.PureComponent {
   }
 
   async getSuggestions(input) {
-    const data = await (await fetchJSONP(this.state.autocompleteURL + this.state.autocompleteQuery + input, {
-      jsonpCallback: this.state.autocompleteCallback
-    })).json();
+    window.setResults = (results) => { 
+      window.searchResults = results;
+    }
 
-    this.setState({
-      suggestions: data[1].splice(0, 3)
-    });
+    const script = document.createElement('script')
+    script.src = `${this.state.autocompleteURL + this.state.autocompleteQuery + input}&${this.state.autocompleteCallback}=window.setResults`;
+    document.head.appendChild(script);
+
+    try {
+      this.setState({
+        suggestions: window.searchResults[1].splice(0, 3)
+      });
+    // ignore error if empty
+    } catch (e) {}
+
+    document.head.removeChild(script);
   }
 
   init() {
@@ -136,7 +144,7 @@ export default class Search extends React.PureComponent {
       <form action={this.state.url} className='searchBar'>
         {this.state.microphone}
         <SearchIcon onClick={this.searchButton}/>
-        <AutocompleteInput placeholder={this.language} name={this.state.query} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
+        <AutocompleteInput placeholder={this.language} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
       </form>
     );
   }