added datalist to tags field.

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>
 }

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)

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)

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)

wwwroot/js/shared.js

@@ -139,8 +139,14 @@ function initDatePicker(input, futureOnly) {
         });
     }
 }
-function initTagSelector(input) {
+function initTagSelector(input, noDataList) {
-    input.tagsinput();
+    if (noDataList) {
+        input.tagsinput({
+            useDataList: false
+        });
+    } else {
+        input.tagsinput();
+    }
 }
 
 function showMobileNav() {

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');
         }
     });

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);