Modernise the typeahead stuff to squash some bugs.

public/js/ff/accounts/edit-reconciliation.js

@@ -18,8 +18,6 @@
  * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
  */
 
-/** global: what, Modernizr, selectsForeignCurrency, convertForeignToNative, validateCurrencyForTransfer, convertSourceToDestination, journalData, journal, accountInfo, exchangeRateInstructions, currencyInfo */
-
 $(document).ready(function () {
     "use strict";
     setAutocompletes();
@@ -30,47 +28,7 @@ $(document).ready(function () {
  * Set the auto-complete JSON things.
  */
 function setAutocompletes() {
-
+    initCategoryAC();
-
+    initTagsAC();
-
-    // do categories auto complete:
-    var categories = new Bloodhound({
-                                        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
-                                        queryTokenizer: Bloodhound.tokenizers.whitespace,
-                                        prefetch: {
-                                            url: 'json/categories',
-                                            filter: function (list) {
-                                                return $.map(list, function (name) {
-                                                    return {name: name};
-                                                });
-                                            }
-                                        }
-                                    });
-    categories.initialize();
-    $('input[name="category"]').typeahead({}, {source: categories, displayKey: 'name', autoSelect: false});
-
-
-    // do tags auto complete:
-    var tagTags = new Bloodhound({
-                                     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
-                                     queryTokenizer: Bloodhound.tokenizers.whitespace,
-                                     prefetch: {
-                                         url: 'json/tags',
-                                         filter: function (list) {
-                                             return $.map(list, function (tagTag) {
-                                                 return {name: tagTag};
-                                             });
-                                         }
-                                     }
-                                 });
-    tagTags.initialize();
-    $('input[name="tags"]').tagsinput({
-                                          typeaheadjs: {
-                                              name: 'tags',
-                                              displayKey: 'name',
-                                              valueKey: 'name',
-                                              source: tagTags.ttAdapter()
-                                          }
-                                      });
 }
 

public/js/ff/common/autocomplete.js

@@ -0,0 +1,127 @@
+/*
+ * autocomplete.js
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Do tags auto complete.
+ */
+function initTagsAC() {
+    var tagTags = new Bloodhound({
+                                     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+                                     queryTokenizer: Bloodhound.tokenizers.whitespace,
+                                     prefetch: {
+                                         url: 'json/tags',
+                                         filter: function (list) {
+                                             return $.map(list, function (tagTag) {
+                                                 return {name: tagTag};
+                                             });
+                                         }
+                                     }
+                                 });
+    tagTags.initialize();
+    $('input[name="tags"]').tagsinput({
+                                          typeaheadjs: {
+                                              name: 'tags',
+                                              displayKey: 'name',
+                                              valueKey: 'name',
+                                              source: tagTags.ttAdapter()
+                                          }
+                                      });
+}
+
+/**
+ * Do destination name (expense accounts) auto complete.
+ */
+function initExpenseAC() {
+    initExpenseACField('destination_name');
+}
+
+/**
+ * Do destination name (expense accounts) auto complete.
+ */
+function initExpenseACField(fieldName) {
+    if ($('input[name="' + fieldName + '"]').length > 0) {
+        console.log('Init expense AC for field "'+fieldName+'"');
+        var destNames = new Bloodhound({
+                                           datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+                                           queryTokenizer: Bloodhound.tokenizers.whitespace,
+                                           prefetch: {
+                                               url: 'json/expense-accounts',
+                                               filter: function (list) {
+                                                   return $.map(list, function (name) {
+                                                       return {name: name};
+                                                   });
+                                               }
+                                           }
+                                       });
+        destNames.initialize();
+        $('input[name="' + fieldName + '"]').typeahead({}, {source: destNames, displayKey: 'name', autoSelect: false});
+    }
+}
+
+/**
+ * Do source name (revenue accounts) auto complete.
+ */
+function initRevenueAC() {
+    initRevenueACField('source_name');
+}
+
+/**
+ * Do source name (revenue accounts) auto complete.
+ */
+function initRevenueACField(fieldName) {
+
+    if ($('input[name="' + fieldName + '"]').length > 0) {
+        console.log('Init revenue AC for field "'+fieldName+'"');
+        var sourceNames = new Bloodhound({
+                                             datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+                                             queryTokenizer: Bloodhound.tokenizers.whitespace,
+                                             prefetch: {
+                                                 url: 'json/revenue-accounts',
+                                                 filter: function (list) {
+                                                     return $.map(list, function (name) {
+                                                         return {name: name};
+                                                     });
+                                                 }
+                                             }
+                                         });
+        sourceNames.initialize();
+        $('input[name="' + fieldName + '"]').typeahead({}, {source: sourceNames, displayKey: 'name', autoSelect: false});
+    }
+}
+
+/**
+ * Do categories auto complete.
+ */
+function initCategoryAC() {
+    var categories = new Bloodhound({
+                                        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+                                        queryTokenizer: Bloodhound.tokenizers.whitespace,
+                                        prefetch: {
+                                            url: 'json/categories',
+                                            filter: function (list) {
+                                                return $.map(list, function (name) {
+                                                    return {name: name};
+                                                });
+                                            }
+                                        }
+                                    });
+    categories.initialize();
+    $('input[name="category"]').typeahead({}, {source: categories, displayKey: 'name', autoSelect: false});
+}

public/js/ff/recurring/create.js

@@ -137,39 +137,10 @@ function parseRepetitionSuggestions(data) {
 }
 
 function initializeAutoComplete() {
-    // auto complete things:
+    initTagsAC();
-    $.getJSON('json/tags').done(function (data) {
+    initExpenseAC();
-        var opt = {
+    initRevenueAC();
-            typeahead: {
+    initCategoryAC();
-                source: data,
-                afterSelect: function () {
-                    this.$element.val("");
-                },
-                autoSelect: false,
-            },
-            autoSelect: false,
-        };
-
-        $('input[name="tags"]').tagsinput(
-            opt
-        );
-    });
-
-    if ($('input[name="destination_name"]').length > 0) {
-        $.getJSON('json/expense-accounts').done(function (data) {
-            $('input[name="destination_name"]').typeahead({source: data, autoSelect: false});
-        });
-    }
-
-    if ($('input[name="source_name"]').length > 0) {
-        $.getJSON('json/revenue-accounts').done(function (data) {
-            $('input[name="source_name"]').typeahead({source: data, autoSelect: false});
-        });
-    }
-
-    $.getJSON('json/categories').done(function (data) {
-        $('input[name="category"]').typeahead({source: data, autoSelect: false});
-    });
 }
 
 /**

public/js/ff/recurring/edit.js

@@ -109,11 +109,11 @@ function respondToFirstDateChange() {
 
     // preselected value:
     var preSelected = currentRepType;
-    if(preSelected === '') {
+    if (preSelected === '') {
         preSelected = select.val();
     }
 
-    $.getJSON(suggestUri, {date: date,pre_select: preSelected,past:true}).fail(function () {
+    $.getJSON(suggestUri, {date: date, pre_select: preSelected, past: true}).fail(function () {
         console.error('Could not load repetition suggestions');
         alert('Could not load repetition suggestions');
     }).done(parseRepetitionSuggestions);
@@ -128,8 +128,8 @@ function parseRepetitionSuggestions(data) {
         if (data.hasOwnProperty(k)) {
             console.log('label: ' + data[k].label + ', selected: ' + data[k].selected);
             opt = $('<option>').val(k).attr('label', data[k].label).text(data[k].label);
-            if(data[k].selected) {
+            if (data[k].selected) {
-                opt.attr('selected','selected');
+                opt.attr('selected', 'selected');
             }
             select.append(opt);
         }
@@ -138,39 +138,10 @@ function parseRepetitionSuggestions(data) {
 }
 
 function initializeAutoComplete() {
-    // auto complete things:
+    initTagsAC();
-    $.getJSON('json/tags').done(function (data) {
+    initExpenseAC();
-        var opt = {
+    initRevenueAC();
-            typeahead: {
+    initCategoryAC();
-                source: data,
-                afterSelect: function () {
-                    this.$element.val("");
-                },
-                autoSelect: false,
-            },
-            autoSelect: false,
-        };
-
-        $('input[name="tags"]').tagsinput(
-            opt
-        );
-    });
-
-    if ($('input[name="destination_name"]').length > 0) {
-        $.getJSON('json/expense-accounts').done(function (data) {
-            $('input[name="destination_name"]').typeahead({source: data, autoSelect: false});
-        });
-    }
-
-    if ($('input[name="source_name"]').length > 0) {
-        $.getJSON('json/revenue-accounts').done(function (data) {
-            $('input[name="source_name"]').typeahead({source: data, autoSelect: false});
-        });
-    }
-
-    $.getJSON('json/categories').done(function (data) {
-        $('input[name="category"]').typeahead({source: data, autoSelect: false});
-    });
 }
 
 /**

public/js/ff/rules/create-edit.js

@@ -362,13 +362,21 @@ function updateTriggerInput(selectList) {
 function createAutoComplete(input, URI) {
     console.log('Now in createAutoComplete().')
     input.typeahead('destroy');
-    $.getJSON(URI).done(function (data) {
-        console.log('Input now has auto complete from URI ' + URI);
-        input.typeahead({source: data, autoSelect: false});
-    }).fail(function () {
-        console.log('Could not grab URI ' + URI + ' so autocomplete will not work');
-    });
 
+    var source = new Bloodhound({
+                                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+                                    queryTokenizer: Bloodhound.tokenizers.whitespace,
+                                    prefetch: {
+                                        url: URI,
+                                        filter: function (list) {
+                                            return $.map(list, function (name) {
+                                                return {name: name};
+                                            });
+                                        }
+                                    }
+                                });
+    source.initialize();
+    input.typeahead({}, {source: source, displayKey: 'name', autoSelect: false});
 }
 
 function testRuleTriggers() {

public/js/ff/transactions/convert.js

@@ -0,0 +1,34 @@
+/*
+ * convert.js
+ * Copyright (c) 2018 thegrumpydictator@gmail.com
+ *
+ * This file is part of Firefly III.
+ *
+ * Firefly III is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Firefly III is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$(document).ready(function () {
+    "use strict";
+    setAutocompletes();
+
+});
+
+/**
+ * Set the auto-complete JSON things.
+ */
+function setAutocompletes() {
+    initRevenueACField('source_account_revenue');
+    initExpenseACField('destination_account_expense');
+}
+

public/js/ff/transactions/show.js

@@ -22,19 +22,28 @@
 
 $(function () {
     "use strict";
-
+    var transactions = new Bloodhound({
-
+                                          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
-    $.getJSON(autoCompleteUri).done(function (data) {
+                                          queryTokenizer: Bloodhound.tokenizers.whitespace,
-        var $input = $("#link_other");
+                                          prefetch: {
-        $input.typeahead({
+                                              url: autoCompleteUri,
-                             source: data,
+                                              filter: function (list) {
-                             autoSelect: true
+                                                  return $.map(list, function (name) {
+                                                      return {name: name};
                                                   });
-        $input.change(function () {
+                                              }
-            var current = $input.typeahead("getActive");
+                                          }
+                                      });
+    transactions.initialize();
+    var input=$("#link_other");
+    input.typeahead({}, {source: transactions, displayKey: 'name', autoSelect: false});
+
+    input.change(function () {
+            var current = input.typeahead("getActive");
             if (current) {
                 // Some item from your model is active!
-                if (current.name.toLowerCase() === $input.val().toLowerCase()) {
+                if (current.name.toLowerCase() ===
+                    input.val().toLowerCase()) {
                     // This means the exact match is found. Use toLowerCase() if you want case insensitive match.
                     $('input[name="link_journal_id"]').val(current.id);
                 } else {
@@ -44,7 +53,4 @@ $(function () {
                 $('input[name="link_journal_id"]').val(0);
             }
         });
-    });
-
-
 });

resources/views/accounts/reconcile/edit.twig

@@ -97,6 +97,7 @@
         var what = "{{ what }}";
     </script>
     <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>

resources/views/recurring/create.twig

@@ -194,7 +194,8 @@
 {% endblock %}
 {% block scripts %}
     <script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="lib/fc/fullcalendar.min.js?v={{ FF_VERSION }}"></script>

resources/views/recurring/edit.twig

@@ -215,7 +215,8 @@
 {% endblock %}
 {% block scripts %}
     <script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="lib/fc/fullcalendar.min.js?v={{ FF_VERSION }}"></script>

resources/views/rules/rule/create.twig

@@ -145,7 +145,7 @@
 
 {% endblock %}
 {% block scripts %}
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript">
         var triggerCount = {{ triggerCount }};
         var actionCount = {{ actionCount }};

resources/views/rules/rule/edit.twig

@@ -128,7 +128,7 @@
 
 {% endblock %}
 {% block scripts %}
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript">
         var triggerCount = {{ triggerCount }};
         var actionCount = {{ actionCount }};

resources/views/transactions/bulk/edit.twig

@@ -128,7 +128,8 @@
     <script type="text/javascript">
         var what = "";
     </script>
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/ff/transactions/mass/edit-bulk.js?v={{ FF_VERSION }}"></script>
 {% endblock %}

resources/views/transactions/convert.twig

@@ -215,10 +215,7 @@
 
 {% endblock %}
 {% block scripts %}
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
-    <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
-{% endblock %}
+    <script type="text/javascript" src="js/ff/transactions/convert.js?v={{ FF_VERSION }}"></script>
-
-{% block styles %}
-    <link href="css/bootstrap-tagsinput.css?v={{ FF_VERSION }}" type="text/css" rel="stylesheet" media="all">
 {% endblock %}

resources/views/transactions/mass/edit.twig

@@ -136,6 +136,7 @@
     <script type="text/javascript">
         var what = "";
     </script>
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/ff/transactions/mass/edit.js?v={{ FF_VERSION }}"></script>
 {% endblock %}

resources/views/transactions/show.twig

@@ -463,6 +463,6 @@
     <script type="text/javascript">
         var autoCompleteUri = "{{ route('json.journals-with-id',[journal.id]) }}";
     </script>
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/ff/transactions/show.js?v={{ FF_VERSION }}"></script>
 {% endblock %}

resources/views/transactions/single/create.twig

@@ -242,6 +242,7 @@
     </script>
 
     <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
 
     <script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>

resources/views/transactions/single/edit.twig

@@ -248,7 +248,8 @@
     <script type="text/javascript">
         var what = "{{ what }}";
     </script>
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>

resources/views/transactions/split/edit.twig

@@ -328,7 +328,8 @@
         var originalForeignSum = {{ preFilled.journal_foreign_amount }};
         var what = "{{ preFilled.what }}";
     </script>
-    <script type="text/javascript" src="js/lib/bootstrap3-typeahead.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/lib/typeahead/typeahead.bundle.min.js?v={{ FF_VERSION }}"></script>
+    <script type="text/javascript" src="js/ff/common/autocomplete.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/bootstrap-tagsinput.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/jquery-ui.min.js?v={{ FF_VERSION }}"></script>
     <script type="text/javascript" src="js/lib/modernizr-custom.js?v={{ FF_VERSION }}"></script>