Assets: Suggest operating systems when adding an asset

Author: wrongecho

client_asset_add_modal.php

@@ -12,7 +12,7 @@
                 <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?>">
                 <input type="hidden" name="client_id" value="<?php echo $client_id; ?>">
 
-                <div class="modal-body bg-white">
+                <div class="modal-body bg-white ui-front">
 
                     <ul class="nav nav-pills nav-justified mb-3">
                         <li class="nav-item">
@@ -116,7 +116,7 @@
                                         <div class="input-group-prepend">
                                             <span class="input-group-text"><i class="fab fa-fw fa-windows"></i></span>
                                         </div>
-                                        <input type="text" class="form-control" name="os" placeholder="ex Windows 10 Pro">
+                                        <input type="text" class="form-control" name="os" id="os" placeholder="ex Windows 10 Pro">
                                     </div>
                                 </div>
                             <?php } ?>

client_assets.php

@@ -91,6 +91,16 @@
 
 $num_rows = mysqli_fetch_row(mysqli_query($mysqli, "SELECT FOUND_ROWS()"));
 
+
+// OS typeahead suggestions
+$os_sql = mysqli_query($mysqli, "SELECT DISTINCT asset_os AS label FROM assets WHERE asset_archived_at IS NULL");
+if (mysqli_num_rows($os_sql) > 0) {
+    while ($row = mysqli_fetch_array($os_sql)) {
+        $os_arr[] = $row;
+	 }
+    $json_os = json_encode($os_arr);
+}
+
 ?>
 
     <div class="col-sm-12 mb-3">
@@ -619,3 +629,20 @@ class="btn btn-<?php if($archived == 1){ echo "primary"; } else { echo "default"
 
 require_once "footer.php";
 
+?>
+
+<!-- JSON Autocomplete / type ahead -->
+<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.min.css">
+<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
+<script>
+    $(function() {
+        var operatingSystems = <?php echo $json_os; ?>;
+        $("#os").autocomplete({
+            source: operatingSystems,  // Should be an array of objects with 'label' and 'value'
+            select: function(event, ui) {
+                $("#os").val(ui.item.label); // Set the input field value to the selected label
+                return false;
+            }
+        });
+    });
+</script>