diff --git a/Views/Home/_GarageDisplay.cshtml b/Views/Home/_GarageDisplay.cshtml
index 068a17d..d168efc 100644
--- a/Views/Home/_GarageDisplay.cshtml
+++ b/Views/Home/_GarageDisplay.cshtml
@@ -10,6 +10,12 @@
             {
                 <span onclick="filterGarage(this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
             }
+            <datalist id="tagList">
+                @foreach (string recordTag in recordTags)
+                {
+                    <!option value="@recordTag"></!option>
+                }
+            </datalist>
         </div>
     </div>
 }
diff --git a/Views/Vehicle/_CollisionRecords.cshtml b/Views/Vehicle/_CollisionRecords.cshtml
index 92adb07..8c2187b 100644
--- a/Views/Vehicle/_CollisionRecords.cshtml
+++ b/Views/Vehicle/_CollisionRecords.cshtml
@@ -15,6 +15,12 @@
             {
                 <span onclick="filterTable('accident-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
             }
+            <datalist id="tagList">
+                @foreach (string recordTag in recordTags)
+                {
+                    <!option value="@recordTag"></!option>
+                }
+            </datalist>
         </div>
         <div>
             @if (enableCsvImports)
diff --git a/Views/Vehicle/_Gas.cshtml b/Views/Vehicle/_Gas.cshtml
index 12ed2cb..c2c7d0a 100644
--- a/Views/Vehicle/_Gas.cshtml
+++ b/Views/Vehicle/_Gas.cshtml
@@ -124,10 +124,10 @@
 <script>
     @if (!string.IsNullOrWhiteSpace(preferredFuelEconomyUnit))
     {
-        @:convertFuelMileageUnits(decodeHTMLEntities('@fuelEconomyUnit'), decodeHTMLEntities('@preferredFuelEconomyUnit'));
+        @:convertFuelMileageUnits(decodeHTMLEntities('@fuelEconomyUnit'), decodeHTMLEntities('@preferredFuelEconomyUnit'), false);
     }
         @if (!string.IsNullOrWhiteSpace(preferredGasUnit))
         {
-        @:convertGasConsumptionUnits(decodeHTMLEntities('@consumptionUnit'), decodeHTMLEntities('@preferredGasUnit'));
+        @:convertGasConsumptionUnits(decodeHTMLEntities('@consumptionUnit'), decodeHTMLEntities('@preferredGasUnit'), false);
     }
 </script>
\ No newline at end of file
diff --git a/Views/Vehicle/_ServiceRecords.cshtml b/Views/Vehicle/_ServiceRecords.cshtml
index 73feff4..56e2043 100644
--- a/Views/Vehicle/_ServiceRecords.cshtml
+++ b/Views/Vehicle/_ServiceRecords.cshtml
@@ -15,6 +15,12 @@
             {
                 <span onclick="filterTable('servicerecord-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
             }
+            <datalist id="tagList">
+                @foreach (string recordTag in recordTags)
+                {
+                    <!option value="@recordTag"></!option>
+                }
+            </datalist>
         </div>
         <div>
             @if (enableCsvImports)
diff --git a/Views/Vehicle/_UpgradeRecords.cshtml b/Views/Vehicle/_UpgradeRecords.cshtml
index 5f4aead..52db9de 100644
--- a/Views/Vehicle/_UpgradeRecords.cshtml
+++ b/Views/Vehicle/_UpgradeRecords.cshtml
@@ -15,6 +15,12 @@
             {
                 <span onclick="filterTable('upgrade-tab-pane', this)" class="user-select-none ms-2 rounded-pill badge bg-secondary tagfilter" style="cursor:pointer;">@recordTag</span>
             }
+            <datalist id="tagList">
+                @foreach (string recordTag in recordTags)
+                {
+                    <!option value="@recordTag"></!option>
+                }
+            </datalist>
         </div>
         <div>
             @if (enableCsvImports)
diff --git a/wwwroot/js/gasrecord.js b/wwwroot/js/gasrecord.js
index fab47bf..49ce0ff 100644
--- a/wwwroot/js/gasrecord.js
+++ b/wwwroot/js/gasrecord.js
@@ -144,7 +144,7 @@ function saveUserGasTabPreferences() {
     });
 }
 
-function convertGasConsumptionUnits(currentUnit, destinationUnit) {
+function convertGasConsumptionUnits(currentUnit, destinationUnit, save) {
     var sender = $("[data-gas='consumption']");
     if (currentUnit == "US gal") {
         switch (destinationUnit) {
@@ -160,7 +160,7 @@ function convertGasConsumptionUnits(currentUnit, destinationUnit) {
                     var decimalPoints = getGlobalConfig().useThreeDecimals ? 3 : 2;
                     elem.innerText = `${getGlobalConfig().currencySymbol}${convertedAmount.toFixed(decimalPoints)}`;
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
             case "imp gal":
                 $("[data-gas-type='consumption']").map((index, elem) => {
@@ -174,7 +174,7 @@ function convertGasConsumptionUnits(currentUnit, destinationUnit) {
                     var decimalPoints = getGlobalConfig().useThreeDecimals ? 3 : 2;
                     elem.innerText = `${getGlobalConfig().currencySymbol}${convertedAmount.toFixed(decimalPoints)}`;
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
         }
     } else if (currentUnit == "l") {
@@ -191,7 +191,7 @@ function convertGasConsumptionUnits(currentUnit, destinationUnit) {
                     var decimalPoints = getGlobalConfig().useThreeDecimals ? 3 : 2;
                     elem.innerText = `${getGlobalConfig().currencySymbol}${convertedAmount.toFixed(decimalPoints)}`;
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
             case "imp gal":
                 $("[data-gas-type='consumption']").map((index, elem) => {
@@ -205,7 +205,7 @@ function convertGasConsumptionUnits(currentUnit, destinationUnit) {
                     var decimalPoints = getGlobalConfig().useThreeDecimals ? 3 : 2;
                     elem.innerText = `${getGlobalConfig().currencySymbol}${convertedAmount.toFixed(decimalPoints)}`;
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
         }
     } else if (currentUnit == "imp gal") {
@@ -222,7 +222,7 @@ function convertGasConsumptionUnits(currentUnit, destinationUnit) {
                     var decimalPoints = getGlobalConfig().useThreeDecimals ? 3 : 2;
                     elem.innerText = `${getGlobalConfig().currencySymbol}${convertedAmount.toFixed(decimalPoints)}`;
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
             case "l":
                 $("[data-gas-type='consumption']").map((index, elem) => {
@@ -236,13 +236,13 @@ function convertGasConsumptionUnits(currentUnit, destinationUnit) {
                     var decimalPoints = getGlobalConfig().useThreeDecimals ? 3 : 2;
                     elem.innerText = `${getGlobalConfig().currencySymbol}${convertedAmount.toFixed(decimalPoints)}`;
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
         }
     }
 }
 
-function convertFuelMileageUnits(currentUnit, destinationUnit) {
+function convertFuelMileageUnits(currentUnit, destinationUnit, save) {
     var sender = $("[data-gas='fueleconomy']");
     if (currentUnit == "l/100km") {
         switch (destinationUnit) {
@@ -272,7 +272,7 @@ function convertFuelMileageUnits(currentUnit, destinationUnit) {
                     sender.text(sender.text().replace(sender.attr("data-unit"), "km/l"));
                     sender.attr("data-unit", "km/l");
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
         }
     } else if (currentUnit == "km/l") {
@@ -302,7 +302,7 @@ function convertFuelMileageUnits(currentUnit, destinationUnit) {
                     sender.text(sender.text().replace(sender.attr("data-unit"), "l/100km"));
                     sender.attr("data-unit", "l/100km");
                 });
-                setDebounce(saveUserGasTabPreferences);
+                if (save) { setDebounce(saveUserGasTabPreferences); }
                 break;
         }
     }
@@ -315,22 +315,22 @@ function toggleUnits(sender) {
     if (sender.attr("data-gas") == "consumption") {
         switch (sender.attr("data-unit")) {
             case "US gal":
-                convertGasConsumptionUnits("US gal", "l");
+                convertGasConsumptionUnits("US gal", "l", true);
                 break;
             case "l":
-                convertGasConsumptionUnits("l", "imp gal");
+                convertGasConsumptionUnits("l", "imp gal", true);
                 break;
             case "imp gal":
-                convertGasConsumptionUnits("imp gal", "US gal");
+                convertGasConsumptionUnits("imp gal", "US gal", true);
                 break;
         }
     } else if (sender.attr("data-gas") == "fueleconomy") {
         switch (sender.attr("data-unit")) {
             case "l/100km":
-                convertFuelMileageUnits("l/100km", "km/l");
+                convertFuelMileageUnits("l/100km", "km/l", true);
                 break;
             case "km/l":
-                convertFuelMileageUnits("km/l", "l/100km");
+                convertFuelMileageUnits("km/l", "l/100km", true);
                 break;
         }
     }
diff --git a/wwwroot/js/shared.js b/wwwroot/js/shared.js
index f0da3c2..43b4f8d 100644
--- a/wwwroot/js/shared.js
+++ b/wwwroot/js/shared.js
@@ -139,8 +139,14 @@ function initDatePicker(input, futureOnly) {
         });
     }
 }
-function initTagSelector(input) {
-    input.tagsinput();
+function initTagSelector(input, noDataList) {
+    if (noDataList) {
+        input.tagsinput({
+            useDataList: false
+        });
+    } else {
+        input.tagsinput();
+    }
 }
 
 function showMobileNav() {
diff --git a/wwwroot/js/vehicle.js b/wwwroot/js/vehicle.js
index db47f25..6322725 100644
--- a/wwwroot/js/vehicle.js
+++ b/wwwroot/js/vehicle.js
@@ -214,7 +214,7 @@ function editVehicle(vehicleId) {
     $.get(`/Vehicle/GetEditVehiclePartialViewById?vehicleId=${vehicleId}`, function (data) {
         if (data) {
             $("#editVehicleModalContent").html(data);
-            initTagSelector($("#inputTag"));
+            initTagSelector($("#inputTag"), true);
             $('#editVehicleModal').modal('show');
         }
     });
diff --git a/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.js b/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.js
index 9bb0e20..e281de6 100644
--- a/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.js
+++ b/wwwroot/lib/bootstrap-tagsinput/bootstrap-tagsinput.js
@@ -34,18 +34,22 @@
    */
   function TagsInput(element, options) {
     this.itemsArray = [];
-
     this.$element = $(element);
     this.$element.hide();
-
+    
     this.isSelect = (element.tagName === 'SELECT');
     this.multiple = (this.isSelect && element.hasAttribute('multiple'));
     this.objectItems = options && options.itemValue;
     this.placeholderText = element.hasAttribute('placeholder') ? this.$element.attr('placeholder') : '';
     this.inputSize = Math.max(1, this.placeholderText.length);
 
+      var useDataList = true;
+      if (options != undefined && !options.useDataList) {
+          useDataList = false;
+      }
+
     this.$container = $('<div class="form-control bootstrap-tagsinput"></div>');
-    this.$input = $('<input type="text" placeholder="' + this.placeholderText + '"/>').appendTo(this.$container);
+      this.$input = $(`<input type="text" ${!useDataList ? "" : "list='tagList'"}placeholder="` + this.placeholderText + '"/>').appendTo(this.$container);
 
     this.$element.before(this.$container);
 
@@ -422,6 +426,32 @@
         $input.attr('size', Math.max(this.inputSize, $input.val().length));
       }, self));
 
+        self.$container.on('input', 'input', $.proxy(function (event) {
+            if (event.originalEvent.data == undefined) {
+                var $input = $(event.target);
+                var text = $input.val(),
+                    maxLengthReached = self.options.maxChars && text.length >= self.options.maxChars;
+                if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
+                    //check if confirm keys are in input and then replace them.
+                    text = text.replace(String.fromCharCode(event.which), "")
+                    // Only attempt to add a tag if there is data in the field
+                    if (text.length !== 0) {
+                        self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text);
+                        $input.val('');
+                    }
+
+                    // If the field is empty, let the event triggered fire as usual
+                    if (self.options.cancelConfirmKeysOnEmpty === false) {
+                        event.preventDefault();
+                    }
+                }
+                var textLength = $input.val().length,
+                    wordSpace = Math.ceil(textLength / 5),
+                    size = textLength + wordSpace + 1;
+                $input.attr('size', Math.max(this.inputSize, $input.val().length));
+            };
+        }));
+
       self.$container.on('keypress', 'input', $.proxy(function(event) {
          var $input = $(event.target);