Ajax de recetas incompleto

app/Config/Routes.php

@@ -46,6 +46,9 @@ $routes->get('/insert_recipe', 'InsertRecipeController::index');
 $routes->match(['get', 'post'], '/search_ingredient', 'InsertRecipeController::search_ingredient');
 $routes->post('/insert_recipe', 'InsertRecipeController::insert_recipe');
 
+$routes->match(['get', 'post'], '/search_recipe', 'RecipesController::search_recipe');
+
+
 
 $routes->get('login','Pages::viewLogin');
 $routes->get('users','User::list');

app/Controllers/Home.php

@@ -8,4 +8,6 @@ class Home extends BaseController
     {
         return view('welcome_message');
     }
+
+    
 }

app/Controllers/RecipesController.php

@@ -45,5 +45,25 @@ class RecipesController extends Controller
         }
     }
 
+    //public function search_recipe() {
+        // Obtener la consulta de búsqueda desde el formulario
+     //   $query = $this->request->getVar('query');
       
+        // Cargar el modelo de ingredientes (si no lo has hecho)
+        //$recipesModel = new \App\Models\RecipesModel();
+      
+        // Buscar ingredientes en la base de datos que coincidan con la consulta
+       // $recipes = $recipesModel->search_recipe($query);
+      
+        // Devolver los ingredientes coincidentes en formato JSON
+     //   return $this->response->setJSON($recipes);
+   // }
+
+   public function search_recipe()
+   {
+       $query = $this->request->getVar('query');
+       $recipesModel = new \App\Models\RecipesModel();
+       $recipes = $recipesModel->search_recipe($query);
+       return $this->response->setJSON($recipes);
+   }
 }
\ No newline at end of file

app/Models/RecipesModel.php

@@ -44,6 +44,20 @@ class recipesModel extends Model
         return $query->getResult();
     }
     
+   /*  public function search_recipe($query)
+    {
+        if ($query) {
+            return $this->like('name', $query)->findAll();
+        }
+        return [];
+    } */
 
+    public function search_recipe($query)
+    {
+        if ($query) {
+            return $this->like('name', $query)->findAll();
+        }
+        return [];
+    }
     
 }
\ No newline at end of file

app/Views/templates/header.php

@@ -32,7 +32,8 @@
   <link href="<?= base_url("css/style.css") ?>" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.6.4.min.js"
     integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
-
+  <script src="js/main.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 </head>
 
@@ -56,10 +57,18 @@
 
     <div class="search-bar">
   <form class="search-form d-flex align-items-center" method="POST" action="#">
-            <input type="text" name="query" placeholder="Buscar por receta..." title="Enter search keyword">
-            <button type="submit" title="Search"><i class="bi bi-search"></i></button>
+    <input type="text" id="search-query" name="query" placeholder="Buscar por receta..."
+      title="Enter search keyword">
   </form>
-        </div><!-- End Search Bar -->
+  <div id="recipe_dropdown" class="recipe-dropdown">
+    <ul id="recipe_list" class="recipe-list list-unstyled"></ul>
+  </div>
+</div>
+
+
+
+
+
 
     <nav class="header-nav ms-auto">
       <ul class="d-flex align-items-center">
@@ -146,7 +155,3 @@
     </nav><!-- End Icons Navigation -->
 
   </header><!-- End Header -->
\ No newline at end of file
-
-
-
-   
\ No newline at end of file

public/css/style.css

@@ -417,6 +417,32 @@ h6 {
   color: #012970;
 }
 
+.recipe-dropdown {
+  position:sticky;
+  left: 0;
+  right: 0;
+  top: 100%;
+  background: white;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 3px 3px;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+  display: none;
+}
+
+.recipe-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.recipe-item:hover {
+  background-color: #f8f9fa;
+}
+
+
 /*--------------------------------------------------------------
 # Header Nav
 --------------------------------------------------------------*/

public/js/main.js

@@ -321,4 +321,53 @@
       }, 200);
     }
   
+
+
+
+   
+    function search_recipe(query) {
+      fetch('/search_recipe', {
+          method: 'POST',
+          headers: {
+              'Content-Type': 'application/x-www-form-urlencoded',
+              'X-Requested-With': 'XMLHttpRequest'
+          },
+          body: 'query=' + encodeURIComponent(query)
+      })
+      .then((response) => response.json())
+      .then((searchResults) => {
+          const recipeList = document.querySelector('#recipe_list');
+          recipeList.innerHTML = '';
+    
+          if (searchResults.length > 0) {
+              document.querySelector('#recipe_dropdown').style.display = 'block';
+          } else {
+              document.querySelector('#recipe_dropdown').style.display = 'none';
+          }
+    
+          searchResults.forEach((recipe) => {
+              const listItem = document.createElement('li');
+              listItem.classList.add('recipe-item');
+    
+              const nameElement = document.createElement('span');
+              nameElement.textContent = recipe.name;
+              listItem.appendChild(nameElement);
+    
+              recipeList.appendChild(listItem);
+          });
+      });
+    }
+    
+    document.addEventListener('click', function (event) {
+      if (!event.target.closest('.search-bar')) {
+          document.querySelector('#recipe_dropdown').style.display = 'none';
+      }
+    });
+    
+    document.querySelector('#search-query').addEventListener('input', function (event) {
+      search_recipe(event.target.value);
+    });
+    
+
+
   })();
\ No newline at end of file