Added a simple autocomplete mechanism for the footprint URL.

assets/css/app.css

@@ -693,4 +693,48 @@ table.dataTable {
 
 .dataTables_length {
     display: inline-flex;
+}
+
+/******************************************
+* Typeahead menu
+*******************************************/
+
+.tt-query {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+    color: #999
+}
+
+.tt-menu {    /* used to be tt-dropdown-menu in older versions */
+    width: 422px;
+    margin-top: 4px;
+    padding: 4px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+    padding: 3px 20px;
+    line-height: 24px;
+}
+
+.tt-suggestion.tt-cursor,.tt-suggestion:hover {
+    color: #fff;
+    background-color: #0097cf;
+
+}
+
+.tt-suggestion p {
+    margin: 0;
 }

assets/js/app.js

@@ -40,6 +40,8 @@ require( 'datatables.net-select-bs4' );
 require('datatables.net-colreorder-bs4');
 require('bootstrap-select');
 require('jquery-form');
+require('corejs-typeahead/dist/typeahead.bundle.min');
+window.Bloodhound =  require('corejs-typeahead/dist/bloodhound.js');
 
 //Define jquery globally
 window.$ = window.jQuery = require("jquery");

assets/ts_src/event_listeners.ts

@@ -347,6 +347,31 @@ $(document).on("ajaxUI:start", function() {
 
 });
 
+//Register typeaheads
+$(document).on("ajaxUI:reload ajaxUI:start", function () {
+    $('input[data-autocomplete]').each(function() {
+        //@ts-ignore
+        var engine = new Bloodhound({
+            datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
+            queryTokenizer: Bloodhound.tokenizers.obj.whitespace(''),
+            remote: {
+                url: $(this).data('autocomplete'),
+                wildcard: 'QUERY'
+            }
+        });
+
+        $(this).typeahead({
+            hint: true,
+            highlight: true,
+            minLength: 1
+        },
+        {
+            name: 'states',
+            source: engine
+        });
+    })
+});
+
 
 //Need for proper body padding, with every navbar height
 $(window).resize(function () {

assets/tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es5",
     "sourceMap": true,
     "typeRoots": ["../node_modules"],
-    "types": ["jquery", "bootstrap", "jquery.form", "bootstrap-treeview", "bootbox"]
+    "types": ["jquery", "bootstrap", "jquery.form", "bootstrap-treeview", "bootbox", "typeahead"]
   },
   "exclude": [
     "node_modules"