don't actually select until the user uses tab or down arrow

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "autocompeter",
-  "version": "1.1.13",
+  "version": "1.2.0",
   "homepage": "https://autocompeter.com",
   "authors": [
     "Peter Bengtsson <[email protected]>"

public/dist/autocompeter.js

@@ -90,6 +90,7 @@
 
     var results_ps = [];
     var selected_pointer = 0;
+    var actually_selected_pointer = false;
     q.spellcheck = false;
     q.autocomplete = 'off';
 
@@ -215,7 +216,7 @@
         }
 
         p = createDomElement('p');
-        if (i === selected_pointer) {
+        if (i === selected_pointer && actually_selected_pointer) {
           p.classList.add('selected');
         }
         p.dataset.i = i;  // needed by the onmouseover event handler
@@ -244,12 +245,13 @@
 
     function findParentForm(element) {
       var parent = element.parentNode;
+      if (parent === null) {
+        console.warn("Form can not be found. Nothing to submit");
+        return;
+      }
       if (parent.nodeName === 'FORM') {
         return parent;
       }
-      if (parent === null) {
-        throw "too deep. no parent form node to be found";
-      }
       return findParentForm(parent);
     }
 
@@ -262,22 +264,24 @@
         if (q.value !== hint.value) {
           handler();  // this starts a new ajax request
         }
+        actually_selected_pointer = true;
       } else if (name === 'down' || name === 'up') {
         if (name === 'down') {
           selected_pointer = Math.min(results_ps.length - 1, ++selected_pointer);
         } else if (name === 'up') {
           selected_pointer = Math.max(0, --selected_pointer);
         }
         for (i=0, len=results_ps.length; i < len; i++) {
-          if (i === selected_pointer) {
+          if (i === selected_pointer && actually_selected_pointer) {
             results_ps[i].classList.add('selected');
           } else {
             results_ps[i].classList.remove('selected');
           }
         }
+        actually_selected_pointer = true;
         displayResults();
       } else if (name === 'enter') {
-        if (results_ps.length) {
+        if (results_ps.length && actually_selected_pointer) {
           var p = results_ps[selected_pointer];
           var a = p.getElementsByTagName('a')[0];
           q.value = hint.value = a.textContent;
@@ -286,7 +290,10 @@
         } else {
           // We need to submit the form but we can't simply `return true`
           // because the event we're returning to isn't a form submission.
-          findParentForm(q).submit();
+          var form = findParentForm(q);
+          if (form) {
+            form.submit();
+          }
           return true;
         }
       } else if (name === 'esc') {
@@ -338,8 +345,11 @@
 
         }
       }
-      // new character, let's reset the selected_pointer
+      // New character, let's reset the selected_pointer
       selected_pointer = 0;
+      // Also, reset that none of the results have been explicitly
+      // selected yet.
+      actually_selected_pointer = false;
       if (cache[q.value.trim()]) {
         var response = cache[q.value.trim()];
         terms = response.terms;

src/autocompeter.js

@@ -90,6 +90,7 @@
 
     var results_ps = [];
     var selected_pointer = 0;
+    var actually_selected_pointer = false;
     q.spellcheck = false;
     q.autocomplete = 'off';
 
@@ -215,7 +216,7 @@
         }
 
         p = createDomElement('p');
-        if (i === selected_pointer) {
+        if (i === selected_pointer && actually_selected_pointer) {
           p.classList.add('selected');
         }
         p.dataset.i = i;  // needed by the onmouseover event handler
@@ -244,12 +245,13 @@
 
     function findParentForm(element) {
       var parent = element.parentNode;
+      if (parent === null) {
+        console.warn("Form can not be found. Nothing to submit");
+        return;
+      }
       if (parent.nodeName === 'FORM') {
         return parent;
       }
-      if (parent === null) {
-        throw "too deep. no parent form node to be found";
-      }
       return findParentForm(parent);
     }
 
@@ -262,22 +264,24 @@
         if (q.value !== hint.value) {
           handler();  // this starts a new ajax request
         }
+        actually_selected_pointer = true;
       } else if (name === 'down' || name === 'up') {
         if (name === 'down') {
           selected_pointer = Math.min(results_ps.length - 1, ++selected_pointer);
         } else if (name === 'up') {
           selected_pointer = Math.max(0, --selected_pointer);
         }
         for (i=0, len=results_ps.length; i < len; i++) {
-          if (i === selected_pointer) {
+          if (i === selected_pointer && actually_selected_pointer) {
             results_ps[i].classList.add('selected');
           } else {
             results_ps[i].classList.remove('selected');
           }
         }
+        actually_selected_pointer = true;
         displayResults();
       } else if (name === 'enter') {
-        if (results_ps.length) {
+        if (results_ps.length && actually_selected_pointer) {
           var p = results_ps[selected_pointer];
           var a = p.getElementsByTagName('a')[0];
           q.value = hint.value = a.textContent;
@@ -286,7 +290,10 @@
         } else {
           // We need to submit the form but we can't simply `return true`
           // because the event we're returning to isn't a form submission.
-          findParentForm(q).submit();
+          var form = findParentForm(q);
+          if (form) {
+            form.submit();
+          }
           return true;
         }
       } else if (name === 'esc') {
@@ -338,8 +345,11 @@
 
         }
       }
-      // new character, let's reset the selected_pointer
+      // New character, let's reset the selected_pointer
       selected_pointer = 0;
+      // Also, reset that none of the results have been explicitly
+      // selected yet.
+      actually_selected_pointer = false;
       if (cache[q.value.trim()]) {
         var response = cache[q.value.trim()];
         terms = response.terms;

templates/index.tmpl

@@ -102,8 +102,10 @@
                         <h1>Autocompeter</h1>
                         <h3>A really fast AJAX autocomplete service and widget</h3>
                         <hr class="intro-divider">
-
+<form action="https://www.peterbe.com/search">
 <input type="text" name="q" class="form-control" placeholder="Type something">
+</form>
+
 <script src="/dist/autocompeter.min.js"></script>
 <script>
 // The url option overide here is optional, just done to make local development