jsautocomplete_builder 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a481220419076acf6021cc17c4ddf3244d86948575050eb831a93197258bd886
-  data.tar.gz: 9fc7099338901e60269c6863b0b4251982d148430276aebfb3d7de2733c51059
+  metadata.gz: 4e6f46cdcc2bc2b61b1b37263ed9c87af441f501341c2530f13f6216c3ad03e0
+  data.tar.gz: 0154aa418fd6c18d536d7f500ca46a6bdde6ba7b14c90a976d4d92fe37973c35
 SHA512:
-  metadata.gz: da197ec5352eb554ec70848a410fdd429b77bd996884e2af8fbf56486c59537d59f943dbf8f4a37dafbcf68fa6674b245f50509751954034b4b05a7c847727df
-  data.tar.gz: 244777e4bd15a28c2fba6b78c8eb235a3ae6668adc53feda861a86645c684a0859d3e8f5acf1d950f36f0418cfe2c114bf3dddb0b838fc2605d8625edf901ec3
+  metadata.gz: 2030c12af466b3b7bfdb87806d94b2d34b81f81851c05108c6b2dae251026258f1515390c6b8e113e10a501a8753642434cabd41e7267036231c2e3b7b224c83
+  data.tar.gz: 485aa2efbf0424957e9912e94c09062d43903f0d5b3dd11499caea7277641243db988f399cd5ff7569ae0c81ff3aad35b4e7e7ce53893e94abb329ed13ab11ff

data/lib/jsautocomplete_builder.rb

@@ -21,7 +21,7 @@ class JsAutocompleteBuilder
 html=<<EOF
       <form action='#{@server[:action]}' method='get' name='searchForm'>
 
-        <input tabindex='2' type='text' autofocus='true' onkeyup='updateList(event.keyCode, this)' onfocus='showList()' onblur='hideList()' id='search' autocomplete='off' name='q'/>
+        <input tabindex='2' type='text' autofocus='true' onkeyup='input = this.value; updateList(event.keyCode, this)'  placeholder='search' onfocus='showList()' onblur='hideList()' id='search' autocomplete='off' name='q'/>
         <input type='submit' value='search'>
         <ol id='autolist'></ol>
 
@@ -107,6 +107,14 @@ EOF
 
   def js()
 <<EOF
+      const KEY_UP = 38;
+      const KEY_DOWN = 40;
+      const ESC_KEY = 27;
+      const ENTER_KEY = 13;
+      const SPACEBAR_KEY = 32;
+      
+      var input = ''; 
+
       function ajaxRequest(url, cFunction) {
         var xhttp;
         xhttp = new XMLHttpRequest();
@@ -131,18 +139,17 @@ EOF
 
       function updateList(keyCode, e) {
 
-        // esc key?
-        if (keyCode == 27)
+        if (keyCode == ESC_KEY)
           return
 
-        // down arrow key?
-        if (keyCode == 40) {
-          showList();
+        if (keyCode == KEY_DOWN) {
+          //showList();
           li = document.getElementById('autolist').children.item(0);
           e.value = li.textContent; 
           li.focus();
           return 
         }
+
         //e.value;
         if (e.value.length > 0) {
           ajaxFetchList(e);
@@ -165,16 +172,14 @@ EOF
 
       function itemKeyup(keyCode, e) {
 
-        console.log('keyCode: ' + keyCode);
+        //console.log('keyCode: ' + keyCode);
         txt = document.getElementById('search');
 
-        // enter key or spacebar key?
-        if (keyCode == 13 || keyCode == 32) {
+        if (keyCode == ENTER_KEY || keyCode == SPACEBAR_KEY) {
           itemSelected(e)
         }
 
-        // up arrow?
-        else if (keyCode == 38) {
+        else if (keyCode == KEY_UP) {
           if (e.previousElementSibling) {
             txt.value = e.previousElementSibling.textContent;          
             e.previousElementSibling.focus();
@@ -182,14 +187,16 @@ EOF
           else
             document.getElementById('search').focus();
         }
-        // down arrow?
-        else if (keyCode == 40) {
+
+        else if (keyCode == KEY_DOWN) {
 
           txt.value = e.nextElementSibling.textContent;          
           e.nextElementSibling.focus();
         }
-        // esc key?
-        else if (keyCode == 27) {
+
+        else if (keyCode == ESC_KEY) {
+          // select the original search text value
+          txt.value = input;
           list = document.getElementById('autolist');
           list.style.display = 'none';
           txt.focus();
@@ -208,8 +215,8 @@ EOF
       function showList() {
 
         console.log('parent2: ' + document.activeElement.nodeName);
-        txt = document.getElementById('search');
-
+        txt = document.getElementById('search');    
+        
         if (txt.value.length > 0) {
           list = document.getElementById('autolist');
           list.style.display = 'block';

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jsautocomplete_builder
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - James Robertson