added href to search results, changed to use global hidden atribute, added click outside of search to hide results

Reviewed-on: #29
Reviewed-by: greendavid004 <davidkatrinka1995@gmail.com>

apps/Ajax/ajax-actions.php

@@ -31,10 +31,17 @@ function ajax_search()
     }
     $result = array();
 
-    $recipes = RecipeModel::filter(
+    $recipes = array();
+    $recipe_models = RecipeModel::filter(
         count: 5,
         search: $search_query
     );
+    foreach ($recipe_models as $recipe_model) {
+        $recipe = $recipe_model->getAssocArr();
+        $recipe['image_url'] = $recipe_model->get_image_url();
+        $recipe['url'] = $recipe_model->get_absolute_url();
+        $recipes[] = $recipe;
+    }
     
     $result['count'] = count($recipes);
     $result['result'] = $recipes;
@@ -132,7 +139,9 @@ function ajax_search_ingredient()
         search: $search_query
     );
     $result['count'] = count($ingredients);
-    $result['result'] = $ingredients;
+    $result['result'] = array_map(function($ing) {
+        return $ing->getAssocArr();
+    }, $ingredients);
 
     return $result;
 }

apps/Recipes/Models/RecipeModel.php

@@ -86,6 +86,10 @@ class RecipeModel extends BaseModel
         );');
         return $result;
     }
+    public function get_absolute_url()
+    {
+        return get_permalink('recipes:single', [ $this->get_id() ]);
+    }
     public function get_price()
     {
         return $this->field_estimated_price . '$';

apps/Recipes/Templates/components/catalog-item.php

@@ -1,4 +1,4 @@
-<a href="<?php the_permalink('recipes:single', [$recipe->get_id()]) ?>" class="catalog-recipe hover-anim">
+<a href="<?= $recipe->get_absolute_url() ?>" class="catalog-recipe hover-anim">
     <div class="catalog-recipe__image">
         <img src="<?= $recipe->get_image_url() ?>" alt="<?= $recipe->field_title ?>">
     </div>

assets/js/main.js

@@ -76,9 +76,10 @@ searchInput.addEventListener('input', function () {
     searchTimeout = setTimeout(async () => {
         let searchValue = this.value.trim();
 
+
         if (searchValue.length < 3) {
             searchResults.innerHTML = '';
-            searchResults.classList.add('hidden');
+            searchResults.hidden = true;
             return;
         }
 
@@ -107,16 +108,22 @@ searchInput.addEventListener('input', function () {
             results.forEach(result => {
                 searchResults.innerHTML += `
         <div class="search-result-item hover-anim">
-            <a href="#" class="search-result-link">
+            <a href="${result.url}" class="search-result-link">
             ${result.field_title}
             </a>
         </div>
         `;
             });
-            searchResults.classList.remove('hidden');
+            searchResults.hidden = false;
         } else {
             searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
-            searchResults.classList.remove('hidden');
+            searchResults.hidden = false;
         }
     }, 300);
 });
+
+document.addEventListener('click', function (event) {
+    if (!searchResults.contains(event.target) && event.target !== searchInput) {
+        searchResults.hidden = true;
+    }
+});

components/templates/layout/header.php

@@ -67,7 +67,7 @@
                 <div class="search-and-login">
                     <i class="fa-solid fa-magnifying-glass search-icon"></i>
                     <input type="text" id="search-input" class="search-input" placeholder="Search recipes...">
-                    <div class="search-results hidden" id="search-results">
+                    <div class="search-results" id="search-results" hidden>
                         
                     </div>
                     <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>"

includes/Model/BaseModel.php

@@ -364,6 +364,9 @@ abstract class BaseModel
         else
             return $filter_result[0]->func_total_count;
     }
+    public function getAssocArr() {
+        return get_object_vars($this);
+    }
 
     public function delete()
     {
@@ -436,7 +439,7 @@ abstract class BaseModel
     /**
      * Return model from Mysql result
      * @param array $pdo_result pdo resut FETCH_MODE = FETCH_ASSOC
-     * @return array
+     * @return array(self)
      */
     protected static function createObjectsFromQuery(array $pdo_result)
     {