implemented autocomplete again

bin/autocomplete.js

@@ -0,0 +1,34 @@
+function autocomplete() {
+    var apiurl = $(this).data("apiurl");
+    var search = $(this).val();
+    var elem = $(this);
+    if (search.length > $(this).data("strlen")) {
+        $.post({
+            url: apiurl,
+            data: {
+                q: search
+            },
+            success: function (data) { createAutocompleteDropdown(elem, JSON.parse(data)); }
+        });
+    }
+}
+function createAutocompleteDropdown(elem, values) {
+    var dropdownmenue = $('[aria-labelledby=' + elem.attr("id") + ']');
+    var dropdownItems = dropdownmenue.find(".dropdown-item");
+    dropdownItems.remove();
+
+    for (index = 0; index < values.length; index++) {
+        var value = values[index];
+        var regex = new RegExp((elem).val(), "ig");
+        var displayvalue = value.replace(regex, ("<b><u>" + (elem).val() + "</u></b>"));
+
+        var button = $("<button class=\"dropdown-item\" type=\"button\" data-val='" + value + "' aria-textfield='" + elem.attr("id") + "'>" + displayvalue + "</button>");
+        button.click(dropdownButtonClick);
+        
+        dropdownmenue.append(button);
+    }
+}
+function dropdownButtonClick() {
+    var string = $(this).data("val");
+    $('#' + $(this).attr("aria-textfield")).val(string);
+}

bin/manageRecipe.js

@@ -4,15 +4,7 @@ $(document).ready(function () {
   $("input[type=number]").on("focus", function () { $(this).select(); });
   $("input[type=text]").on("focus", function () { $(this).select(); });
 
-  // implement autocomplete with https://bootstrap-autocomplete.readthedocs.io/en/latest/#
-  $(".autocomplete-ingredient").autoComplete(
-    {
-      resolverSettings: {
-        url: '/api/recipes/auto'
-      }
-    }
-  );
-
+  $(".autocomplete-ingredient").on("input", autocomplete);
 });
 
 function removeItem(elem) {
@@ -33,6 +25,7 @@ function addItem() {
 
   clone.find("input[type=text]").attr("name", ("ingredient[" + dataID + "][Name]"));
   clone.find("input[type=text]").val("");
+  clone.find("input[type=text]").on("input", autocomplete);
   clone.find("input[type=text]").on("focus", function () { $(this).select(); });
   clone.find("input[type=number]").attr("name", ("ingredient[" + dataID + "][Amount]"));
   clone.find("input[type=number]").val("1");

cont/manageRecipe.php

@@ -12,8 +12,8 @@
     $additionalInput = "";
   }
 ?>
-<script src="/bin/bootstrap.autocomplete.js" charset="utf-8"></script>
 <script src="/bin/manageRecipe.js" charset="utf-8"></script>
+<script src="/bin/autocomplete.js" charset="utf-8"></script>
 <?php echo $script; ?>
 <div class="container mt-5">
   <h1><?php echo $title ?></h1>
@@ -54,12 +54,19 @@
         }
       ?>
     </select>
+
     <div class="input-group">
-      <input type="text" class="autocomplete-ingredient form-control" name="ingredient[1][Name]" placeholder="Zutat" autocomplete="off" required>
+      <input type="text" data-apiurl="/api/recipes/auto" data-strlen="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuAutocomplete" class="autocomplete-ingredient form-control dropdown"  name="ingredient[1][Name]" placeholder="Zutat" autocomplete="off" required>
+      
+      <div class="dropdown-menu" aria-labelledby="dropdownMenuAutocomplete">
+        <button class="dropdown-item" type="button" data-value="-1">Tippen um zu suchen... </button>
+      </div>
+
       <div class="input-group-append">
         <span class="input-group-text p-0"><button onclick="removeItem(this);" class="removeItem fas fa-trash-alt bg-transparent rounded-right border-0 p-2 pl-3 pr-3 text-danger"></button></span>
       </div>
     </div>
+
   </div>
 
 

php/classes.recipe.php

@@ -175,10 +175,10 @@
       $mysqli->close();
     }
 
-    function getAllIngredients(){
+    function getAllIngredientsContaining($q){
       include $_SESSION["docroot"].'/php/connect.php';
       $values = array();
-      $result = $mysqli->query("SELECT Name FROM Zutat ORDER BY Name ASC");
+      $result = $mysqli->query("SELECT Name FROM Zutat WHERE Name LIKE '%$q%' ORDER BY Name ASC");
       while($item = $result->fetch_assoc()){
         array_push($values, $item["Name"]);
       }

php/edit-recipes.php

@@ -13,7 +13,7 @@
       break;
 
     case 'auto':
-      $book->getAllIngredients();
+      $book->getAllIngredientsContaining($_POST["q"]);
       break;
 
     case 'edit':