diff --git a/src/actions/events.js b/src/actions/events.js
index 06cdfea52..820a60267 100644
--- a/src/actions/events.js
+++ b/src/actions/events.js
@@ -5,7 +5,7 @@ import authedFetch from 'src/utils/authedFetch'
 import { setFlashMsg } from './app'
 
 function makeRequest(query, startDate, endDate) {
-    var url = `${appSettings.api_base}/search/?type=event&q=${query}&page_size=100`
+    var url = `${appSettings.api_base}/search/?type=event&q=${encodeURI(query)}&page_size=100`;
 
     if(appSettings.nocache) {
         url += `&nocache=${Date.now()}`
diff --git a/src/components/HelFormFields/HelAutoComplete.js b/src/components/HelFormFields/HelAutoComplete.js
index 3a6bf28c8..193a1c47e 100644
--- a/src/components/HelFormFields/HelAutoComplete.js
+++ b/src/components/HelFormFields/HelAutoComplete.js
@@ -26,7 +26,7 @@ class HelAutoComplete extends React.Component {
     getOptions(input) {
         let self = this
         this.setState({isLoading: true});
-        return fetch(this.props.dataSource + input)
+        return fetch(this.props.dataSource + encodeURI(input))
             .then((response) => {
                 return response.json();
             }).then((json) => {
diff --git a/src/components/HelFormFields/HelSelect.js b/src/components/HelFormFields/HelSelect.js
index dfd808dab..725f1a834 100644
--- a/src/components/HelFormFields/HelSelect.js
+++ b/src/components/HelFormFields/HelSelect.js
@@ -26,7 +26,7 @@ class HelSelect extends React.Component {
     }
 
     getOptions(input) {
-        return fetch(this.props.dataSource + input)
+        return fetch(this.props.dataSource + encodeURI(input))
             .then((response) => {
                 return response.json();
             }).then((json) => {