Make client select searchable (TODO: css)

lib/FormBuilder.lib.php

@@ -77,7 +77,7 @@ class FormBuilder {
      *
      * @param string $name Element name
      * @param string $value Element value
-     * @param string $type Input type (text, number, date, select, tel...)
+     * @param string $type Input type (text, number, date, select, datalist (with text input), tel...)
      * @param bool $required If the element is required for form submission.
      * @param string $id Element ID
      * @param array $options Array of [value => text] pairs for a select element
@@ -104,7 +104,7 @@ class FormBuilder {
         if (!empty($id)) {
             $item["id"] = $id;
         }
-        if (!empty($options) && $type == "select") {
+        if (!empty($options) && ($type == "select" || $type == "datalist" || $type == "select2")) {
             $item["options"] = $options;
         }
         if (!empty($pattern)) {
@@ -231,11 +231,15 @@ ITEMTOP;
                                 <span class="input-group-text"><i class="$item[icon]"></i></span>
                             </div>
 INPUTG;
+            $extraclass = "";
             switch ($item['type']) {
+                case "select2":
+                    $extraclass = " select2";
                 case "select":
                     $itemhtml .= $inputgrouptop;
+
                     $itemhtml .= <<<SELECT
-\n                            <select class="form-control" name="$item[name]" aria-label="$strippedlabel" $required>
+\n                            <select class="form-control$extraclass" name="$item[name]" aria-label="$strippedlabel" $required>
 SELECT;
                     foreach ($item['options'] as $value => $label) {
                         $selected = "";
@@ -246,6 +250,24 @@ SELECT;
                     }
                     $itemhtml .= "\n                            </select>";
                     break;
+                case "datalist":
+                    $randomid = hash("md5", random_bytes(20));
+                    $itemhtml .= $inputgrouptop;
+                    $itemhtml .= <<<INPUT
+\n                            <input type="text" list="$randomid" name="$item[name]" $id class="form-control" aria-label="$strippedlabel" minlength="$item[minlength]" maxlength="$item[maxlength]" $pattern value="$item[value]" $required />
+INPUT;
+                    $itemhtml .= <<<DATALIST
+\n                            <datalist id="$randomid">
+DATALIST;
+                    foreach ($item['options'] as $value => $label) {
+                        $selected = "";
+                        if (!empty($item['value']) && $value == $item['value']) {
+                            $selected = " selected";
+                        }
+                        $itemhtml .= "\n                                <option value=\"$value\"$selected>$label</option>";
+                    }
+                    $itemhtml .= "\n                            </datalist>";
+                    break;
                 case "checkbox":
                     $itemhtml .= $inputgrouptop;
                     $itemhtml .= <<<CHECKBOX

pages.php

@@ -55,7 +55,15 @@ define("PAGES", [
         "title" => "404 error"
     ],
     "editmachine" => [
-        "title" => "Edit Machine"
+        "title" => "Edit Machine",
+        "styles" => [
+            "static/css/select2.min.css",
+            "static/css/select2-bootstrap4.min.css"
+        ],
+        "scripts" => [
+            "static/js/select2.full.min.js",
+            "static/js/select2-activate.js"
+        ]
     ],
     "viewmachine" => [
         "title" => "View Machine"

pages/editmachine.php

@@ -52,7 +52,7 @@ if ($editing) {
     $form->addInput("id", $machine->getID(), "text", true, null, null, "Machine ID", "fas fa-desktop", 4, 1, 20);
 }
 $form->addInput("type", $machine->getType(), "select", true, null, $typelist, "Machine Type", "fas fa-desktop");
-$form->addInput("client", $machine->getClientID(), "select", false, null, $clients, "Client", "fas fa-user");
+$form->addInput("client", $machine->getClientID(), "select2", false, null, $clients, "Client", "fas fa-user");
 $form->addInput("model", $machine->getModel(), "text", false, null, null, "Model", "fas fa-hashtag", 4, 0, 200);
 $form->addInput("os", $machine->getOS(), "text", false, null, null, "OS/Software", "fas fa-hdd", 4, 0, 200);
 $form->addInput("serial", $machine->getSerial(), "text", false, null, null, "Serial", "fas fa-barcode", 4, 0, 200);

static/js/select2-activate.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2020 Netsyms Technologies.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+$(document).ready(function () {
+    $(".select2").select2({
+        theme: 'bootstrap4'
+    });
+});