jsautocomplete_builder 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a481220419076acf6021cc17c4ddf3244d86948575050eb831a93197258bd886
+  data.tar.gz: 9fc7099338901e60269c6863b0b4251982d148430276aebfb3d7de2733c51059
+SHA512:
+  metadata.gz: da197ec5352eb554ec70848a410fdd429b77bd996884e2af8fbf56486c59537d59f943dbf8f4a37dafbcf68fa6674b245f50509751954034b4b05a7c847727df
+  data.tar.gz: 244777e4bd15a28c2fba6b78c8eb235a3ae6668adc53feda861a86645c684a0859d3e8f5acf1d950f36f0418cfe2c114bf3dddb0b838fc2605d8625edf901ec3

data/lib/jsautocomplete_builder.rb

@@ -0,0 +1,222 @@
+#!/usr/bin/env ruby
+
+# file: jsautocomplete_builder.rb
+
+require 'rexle'
+require 'rexle-builder'
+
+
+class JsAutocompleteBuilder
+
+  # list: is the url of the server which returns the list
+  # action: is the url of the server to process the search request
+  #
+  def initialize(server: {list: '', action: ''})
+    @server = server
+  end
+
+  # returns just the form part
+  def to_html()
+
+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 type='submit' value='search'>
+        <ol id='autolist'></ol>
+
+      </form>
+EOF
+
+  end
+  
+  def to_css()
+    css()
+  end
+
+  def to_js()
+
+    url = @server[:list] =~ /\?\w+=$/ ? @server[:list] : @server[:list] + '?q='
+    ("\n      var serverList = '%s';\n\n" % url) + js()
+
+  end
+
+  def to_webpage()
+
+    doc = Rexle.new(build_html())
+    doc.root.element('body').add Rexle::Element.new('script').add_text(to_js())
+    doc.root.element('head').add Rexle::Element.new('style').add_text(to_css())
+
+    doc.xml(pretty: true)
+
+  end
+
+  private
+
+  def build_html()
+
+    RexleBuilder.build do |xml|
+      xml.html do 
+        xml.head do
+          xml.title 'Search'
+          xml.meta name: "viewport", content: \
+              "width=device-width, initial-scale=1"
+        end
+        xml.body do
+          xml.div({tabindex: '1', id: 'autosuggest'}, to_html())
+          xml.p 'Search page generated using the jsautocomplete_builder gem'
+        end
+      end
+    end
+  end
+
+  def css()
+<<EOF
+
+
+    body {font-family: Arial;}
+
+    form input {
+      background-color: transparent;
+      padding: 0; margin: 0;
+    }
+    ol {
+      background-color: #eee;
+      position: absolute;
+      left: 12px;
+
+      padding: 0; margin: 0;
+      list-style-type: none;
+    }
+
+    #autolist li {
+      background-color: transparent;
+      padding: 0; margin: 0;
+      cursor: pointer;
+    }
+
+    #autolist li:hover, #autolist li:focus {background-color: rgba(223,223,200,7)}
+
+    div#autosuggest {background-color: transparent; width: 14em;   }
+
+    #autosuggest ol {display: none}
+
+    input[type=submit] {background-color: transparent; display: inline}
+EOF
+  end
+
+  def js()
+<<EOF
+      function ajaxRequest(url, cFunction) {
+        var xhttp;
+        xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+          if (this.readyState == 4 && this.status == 200) {
+            cFunction(this);
+          }
+        };
+        xhttp.open("GET", url, true);
+        xhttp.send();
+      }
+
+      function ajaxFetchList(e) {  
+        ajaxRequest(serverList + e.value, ajaxResponseList)
+      }
+
+      function ajaxResponseList(xhttp) {
+        document.getElementById('autolist').innerHTML = xhttp.responseText;
+        list = document.getElementById('autolist');
+        list.style.display = 'block';
+      }
+
+      function updateList(keyCode, e) {
+
+        // esc key?
+        if (keyCode == 27)
+          return
+
+        // down arrow key?
+        if (keyCode == 40) {
+          showList();
+          li = document.getElementById('autolist').children.item(0);
+          e.value = li.textContent; 
+          li.focus();
+          return 
+        }
+        //e.value;
+        if (e.value.length > 0) {
+          ajaxFetchList(e);
+        }
+      }
+
+      function hideList() {
+
+        setTimeout(function(){ 
+          console.log('parent: ' + document.activeElement.nodeName);
+          id = document.activeElement.parentElement.id;
+
+          if (id  !== 'autolist' && id  !== 'autosuggest') {
+            list = document.getElementById('autolist');
+            list.style.display = 'none';
+          }
+        }, 100);
+
+      }
+
+      function itemKeyup(keyCode, e) {
+
+        console.log('keyCode: ' + keyCode);
+        txt = document.getElementById('search');
+
+        // enter key or spacebar key?
+        if (keyCode == 13 || keyCode == 32) {
+          itemSelected(e)
+        }
+
+        // up arrow?
+        else if (keyCode == 38) {
+          if (e.previousElementSibling) {
+            txt.value = e.previousElementSibling.textContent;          
+            e.previousElementSibling.focus();
+          }
+          else
+            document.getElementById('search').focus();
+        }
+        // down arrow?
+        else if (keyCode == 40) {
+
+          txt.value = e.nextElementSibling.textContent;          
+          e.nextElementSibling.focus();
+        }
+        // esc key?
+        else if (keyCode == 27) {
+          list = document.getElementById('autolist');
+          list.style.display = 'none';
+          txt.focus();
+        }
+      }
+
+      function itemSelected(e) {
+        txt = document.getElementById('search');
+        txt.value = e.textContent;
+
+        list = document.getElementById('autolist');
+        list.style.display = 'none';
+        document.searchForm.submit();
+      }
+
+      function showList() {
+
+        console.log('parent2: ' + document.activeElement.nodeName);
+        txt = document.getElementById('search');
+
+        if (txt.value.length > 0) {
+          list = document.getElementById('autolist');
+          list.style.display = 'block';
+        }
+
+      }
+EOF
+  end
+
+end

data.tar.gz.sig

@@ -0,0 +1 @@
+��r���A"
8[�\j1:F�շ��񔱞 ^�tNԭ4+U�]c/�3�;��G��!V�9����T>�S��!e��/E�z����g@�C��(�ȯ�?���>��x�[<��P+RWg��S������;��Ŧw؎�#gv���<��%�<��Á{�l��ֈm�ik�YEuK��X�����2\b4�2�e�¥�2l�5;��1AH u4�Z0�|ac���I�Ƞ9~�z)8���(]m������L$X�
�T�O�q��,X�ʅ�&�N�n(��T��%^F������׃~�>kF]�a�V�U��_�h��霾��>p�O��I�e߇B��Rߝ���ө��=4m�Z�R�����u��k�

metadata

@@ -0,0 +1,90 @@
+--- !ruby/object:Gem::Specification
+name: jsautocomplete_builder
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- James Robertson
+autorequire: 
+bindir: bin
+cert_chain:
+- |
+  -----BEGIN CERTIFICATE-----
+  MIIEXjCCAsagAwIBAgIBATANBgkqhkiG9w0BAQsFADAsMSowKAYDVQQDDCFnZW1t
+  YXN0ZXIvREM9amFtZXNyb2JlcnRzb24vREM9ZXUwHhcNMTkwODExMTA0OTU1WhcN
+  MjAwODEwMTA0OTU1WjAsMSowKAYDVQQDDCFnZW1tYXN0ZXIvREM9amFtZXNyb2Jl
+  cnRzb24vREM9ZXUwggGiMA0GCSqGSIb3DQEBAQUAA4IBjwAwggGKAoIBgQC0tNWt
+  efY7MZcRvbWchKH1wtLkw4sG/H1Vx2TGSCJpsqrAOXZMa0CA7o8IF85LmHgqn+XW
+  Ue5qyZETa0lLwt2m2EQzfBUyceAaLHIUCOPBxRHqOg8Juuveoy7KTCzzoNShK4ym
+  qAycd1ItcRqZlR1OAAac+mrSjET6nOjijMhsuxqreRHZeP3E5XKjGTLWRR8BdSdC
+  3uWVQLMGpe/a0Cp/CO4pfFgtCs9eOi/z9VL1n2+GbOVC5Mlkk5PqmxD8pY3YCuWe
+  Nl7WrO8Jh4q/r8dHtuHP7j70SCoEjTpyaIaunwU9+0GY+EXoQ6Z8qk5BKY5nbIsY
+  ENJnQsescZ1h6YL5eel6EqYIOCXcCyDk0cax+ORM6t0H+5yD/3HeUCOTH9IhMp3j
+  WTZtqNNC9pl326+KFkt8JwgGjxpOl0ng+KFRgEPZRjrcOQGCegUT4U45Q/G2ZjK5
+  aSi/CgbsBCeRd8kYnFgZcQlYJN266QcFG4QNo7LGwYzeiYXk58QWIk3RNx0CAwEA
+  AaOBijCBhzAJBgNVHRMEAjAAMAsGA1UdDwQEAwIEsDAdBgNVHQ4EFgQUJqcFjRxE
+  IM/uwa1/JY/PbMR3azAwJgYDVR0RBB8wHYEbZ2VtbWFzdGVyQGphbWVzcm9iZXJ0
+  c29uLmV1MCYGA1UdEgQfMB2BG2dlbW1hc3RlckBqYW1lc3JvYmVydHNvbi5ldTAN
+  BgkqhkiG9w0BAQsFAAOCAYEATXbaTbDee/HCu4pIQgZVn8RAeLSZ3Y7XO9S36bjo
+  w8snZqpXuVr4AdYoxwKnVinMt6pAkNnpQOYO/cvavhQZwB9at6vjFPsnlN+nHDpC
+  1dRdTrC8b+EkcRDA2UqYm/W4y3lJY4bEkAw+k/QL2mvA/N7TOyXtvj5YDg+BIJu9
+  ve2FGZrKXCYvshg6D4+BNj180pKMf2G4JSIo8o0HpgC7KtuZXpXjyM5G+yLE+UHc
+  aa3XZyVg1mh1pD600/zafJOUBOf3A2EIZ7n7mVtn/oJtn2s01BMerDdIZO/ncmNl
+  uKsEYVwOKZYLfeMzHnyBxWdACZEd07E7fytKzouWlDpPf08pr+3rhktZ0Oc+ZAd3
+  4J4Qi8WDlqrmL2AwUckai9o/rhbN98h7tlAElo9xp+ETEbCPDcu93b2oU7pCVUPw
+  DmplinAyhjj+5ZDGg6mu65rwjE0W0/r1VK1uXHgH+HVusIp3hXu8myyYbJ8PoAHO
+  3UjkvNzAbcSkU3whryOaXSHI
+  -----END CERTIFICATE-----
+date: 2019-08-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rexle
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.5.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.5.2
+description: 
+email: james@jamesrobertson.eu
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/jsautocomplete_builder.rb
+homepage: https://github.com/jrobertson/jsautocomplete_builder
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.1
+signing_key: 
+specification_version: 4
+summary: Makes it trivial to build an autocomplete search feature into a web page.
+test_files: []