diff --git a/static/css/auto-complete.css b/static/css/auto-complete.css
index 47bc499e3a..082a1f571d 100644
--- a/static/css/auto-complete.css
+++ b/static/css/auto-complete.css
@@ -43,4 +43,6 @@
 
 .autocomplete-suggestion > .context {
     font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
diff --git a/static/js/search.js b/static/js/search.js
index fa1674f1bb..82c906ec43 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -1,9 +1,5 @@
 var lunrIndex, pagesIndex;
 
-function endsWith(str, suffix) {
-    return str.indexOf(suffix, str.length - suffix.length) !== -1;
-}
-
 // Initialize lunrjs using our generated index file
 function initLunr() {
     // First retrieve the index file
@@ -13,75 +9,85 @@ function initLunr() {
             // Set up lunrjs by declaring the fields we use
             // Also provide their boost level for the ranking
             lunrIndex = lunr(function() {
-                this.ref("uri");
+                this.ref('index');
                 this.field('title', {
-		    boost: 15
+                    boost: 15
                 });
                 this.field('tags', {
-		    boost: 10
+                    boost: 10
                 });
-                this.field("content", {
-		    boost: 5
+                this.field('content', {
+                    boost: 5
                 });
 
                 this.pipeline.remove(lunr.stemmer);
                 this.searchPipeline.remove(lunr.stemmer);
 
                 // Feed lunr with each file and let lunr actually index them
-                pagesIndex.forEach(function(page) {
-		    this.add(page);
+                pagesIndex.forEach(function(page, idx) {
+                    page.index = idx;
+                    this.add(page);
                 }, this);
             })
         })
         .fail(function(jqxhr, textStatus, error) {
-            var err = textStatus + ", " + error;
-            console.error("Error getting Hugo index file:", err);
+            var err = textStatus + ', ' + error;
+            console.error('Error getting Hugo index file:', err);
         });
 }
 
 /**
  * Trigger a search in lunr and transform the result
  *
- * @param  {String} query
+ * @param  {String} term
  * @return {Array}  results
  */
-function search(queryTerm) {
+function search(term) {
     // Find the item in our index corresponding to the lunr one to have more info
-    var searchTerm = queryTerm.match(/\w+/g).map(word => word+"^100"+" "+word+"*^10"+" "+"*"+word+"^10"+" "+word+"~2^1").join(" ");
-    return lunrIndex.search(searchTerm).map(function(result) {
-            return pagesIndex.filter(function(page) {
-                return page.uri === result.ref;
-            })[0];
-        });
+    // Remove Lunr special search characters: https://lunrjs.com/guides/searching.html
+    var searchTerm = lunr.tokenizer(term.replace(/[*:^~+-]/, ' ')).flatMap(token => searchPatterns(token.str)).join(' ');
+    return !searchTerm ? [] : lunrIndex.search(searchTerm).map(function(result) {
+        return { index: result.ref, matches: Object.keys(result.matchData.metadata) }
+    });
+}
+
+function searchPatterns(word) {
+    return [
+        word + '^100',
+        word + '*^10',
+        '*' + word + '^10',
+        word + '~' + Math.floor(word.length / 4) + '^1' // allow 1 in 4 letters to have a typo
+    ];
 }
 
 // Let's get started
 initLunr();
-$( document ).ready(function() {
+$(function() {
     var searchList = new autoComplete({
         /* selector for the search box element */
-        selector: $("#search-by").get(0),
+        selector: $('#search-by').get(0),
         /* source is the callback to perform the search */
         source: function(term, response) {
             response(search(term));
         },
         /* renderItem displays individual search results */
         renderItem: function(item, term) {
+            var page = pagesIndex[item.index];
             var numContextWords = 2;
-            var text = item.content.match(
-                "(?:\\s?(?:[\\w]+)\\s?){0,"+numContextWords+"}" +
-                    term.trim()+"(?:\\s?(?:[\\w]+)\\s?){0,"+numContextWords+"}");
-            item.context = text;
-            var divcontext = document.createElement("div");
-            divcontext.className = "context";
-            divcontext.innerText = (item.context || '');
-            var divsuggestion = document.createElement("div");
-            divsuggestion.className = "autocomplete-suggestion";
-            divsuggestion.setAttribute("data-term", term);
-            divsuggestion.setAttribute("data-title", item.title);
-            divsuggestion.setAttribute("data-uri", baseUri + item.uri);
-            divsuggestion.setAttribute("data-context", item.context);
-            divsuggestion.innerText = '» ' + item.title;
+            var contextPattern = '(?:\\S+ +){0,' + numContextWords + '}\\S*\\b(?:' +
+                item.matches.map(match => match.replace(/\W/g, '\\$&')).join('|') +
+                ')\\b\\S*(?: +\\S+){0,' + numContextWords + '}';
+            var context = page.content.match(new RegExp(contextPattern, 'i'));
+            var divcontext = document.createElement('div');
+            divcontext.className = 'context';
+            divcontext.innerText = (context || '');
+            var divsuggestion = document.createElement('div');
+            divsuggestion.className = 'autocomplete-suggestion';
+            divsuggestion.setAttribute('data-term', term);
+            divsuggestion.setAttribute('data-title', page.title);
+            divsuggestion.setAttribute('data-uri', baseUri + page.uri);
+            divsuggestion.setAttribute('data-context', context);
+            divsuggestion.innerText = '» ' + page.title;
             divsuggestion.appendChild(divcontext);
             return divsuggestion.outerHTML;
         },
@@ -93,6 +99,6 @@ $( document ).ready(function() {
 
     // JavaScript-autoComplete only registers the focus event when minChars is 0 which doesn't make sense, let's do it ourselves
     // https://github.com/Pixabay/JavaScript-autoComplete/blob/master/auto-complete.js#L191
-    var selector = $("#search-by").get(0);
+    var selector = $('#search-by').get(0);
     $(selector).focus(selector.focusHandler);
 });