feat: autocomplete for search

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/search/Search.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 
 import EventBus from '../../../modules/helpers/eventbus';
+import fetchJSONP from 'fetch-jsonp';
+
+import AutocompleteInput from '../../helpers/autocomplete/Autocomplete';
 
 import SearchIcon from '@material-ui/icons/Search';
 import MicIcon from '@material-ui/icons/Mic';
@@ -8,6 +11,7 @@ import MicIcon from '@material-ui/icons/Mic';
 import './search.scss';
 
 const searchEngines = require('./search_engines.json');
+const autocompleteProviders = require('./autocomplete_providers.json');
 
 export default class Search extends React.PureComponent {
   constructor() {
@@ -15,7 +19,11 @@ export default class Search extends React.PureComponent {
     this.state = {
       url: '',
       query: '',
-      microphone: null
+      autocompleteURL: '',
+      autocompleteQuery: '',
+      autocompleteCallback: '',
+      microphone: null,
+      suggestions: []
     };
     this.language = window.language.widgets.search;
   }
@@ -42,6 +50,15 @@ export default class Search extends React.PureComponent {
     window.location.href = this.state.url + `?${this.state.query}=` + value;
   }
 
+  async getSuggestions(input) {
+    const data = await (await fetchJSONP(this.state.autocompleteURL + this.state.autocompleteQuery + input, {
+      jsonpCallback: this.state.autocompleteCallback
+    })).json();
+    this.setState({
+      suggestions: data[1].splice(0, 3)
+    });
+  }
+
   init() {
     let url;
     let query = 'q';
@@ -65,9 +82,23 @@ export default class Search extends React.PureComponent {
       microphone = <MicIcon className='micIcon' onClick={this.startSpeechRecognition}/>;
     }
 
+    let autocompleteURL;
+    let autocompleteQuery;
+    let autocompleteCallback;
+
+    if (localStorage.getItem('autocomplete') === 'true') {
+      const info = autocompleteProviders.find((i) => i.value === localStorage.getItem('autocompleteProvider'));
+      autocompleteURL = info.url;
+      autocompleteQuery = info.query;
+      autocompleteCallback = info.callback;
+    }
+
     this.setState({
       url: url,
       query: query,
+      autocompleteURL: autocompleteURL,
+      autocompleteQuery: autocompleteQuery,
+      autocompleteCallback: autocompleteCallback,
       microphone: microphone
     });
   }
@@ -91,7 +122,7 @@ export default class Search extends React.PureComponent {
       <form action={this.state.url} className='searchBar'>
         {this.state.microphone}
         <SearchIcon onClick={this.searchButton}/>
-        <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
+        <AutocompleteInput placeholder={this.language} name={this.state.query} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
       </form>
     );
   }

src/components/widgets/search/autocomplete_providers.json

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "Google",
+    "value": "google",
+    "url": "https://www.google.com/complete/search?client=chrome",
+    "callback": "callback",
+    "query": "&q="
+  },
+  {
+    "name": "Bing",
+    "value": "bing",
+    "url": "https://api.bing.com/osjson.aspx?JsonType=callback",
+    "callback": "JsonCallback",
+    "query": "&query="
+  }
+]
+  

src/components/widgets/search/search.scss

@@ -8,7 +8,7 @@
 
   input[type=text] {
     width: 140px;
-    margin-left: 12px;
+    margin-left: 40px;
     border-radius: 24px;
     font-size: calc(5px + 1.2vmin);
     border: none;
@@ -28,7 +28,8 @@
   }
 
   .MuiSvgIcon-root {
-    margin-top: 4px;
+    position: absolute;
+    margin-top: 6px;
     font-size: 30px;
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
     cursor: pointer;