Need help to create an Ajax field for product searching - Prestashop 8

[yoyo051]

Hi,

I've made a custom front office module to automate the product's short description content in a specific HTML format.
I am facing an issue with the product search field.
For searching easily, I choose AJAX. I did not manage to work it fine. 

Here are my code :

- AJAX field in template file :

 <label class="control-label col-lg-4">
      {l s='Produit' mod='LK_MiseEnFormeDescCourte'}
  </label>
  	<div class="col-lg-8" style="position: relative;">
        <input type="text" id="ajax_product_search" class="form-control" placeholder="Rechercher un produit..." autocomplete="off">
         <input type="hidden" name="id_product" id="selected_product_id" />
         <ul id="ajax_product_results"
            style="position:absolute; top:100%; left:0; z-index:10;
                background:white; border:1px solid #ccc;
                 width:100%; display:none; list-style:none;
             padding:0; margin:0; max-height:200px; overflow-y:auto;">
          </ul>
	</div>

- AJAX Javascript (inside template file)

     var ajaxUrl = '{$link->getModuleLink('lk_miseenformedesccourte', 'ajaxproducts')|escape:'javascript'}?ajax=1';
     console.log("ajaxUrl:", ajaxUrl);

    const searchInput = document.getElementById('ajax_product_search');
    const resultBox = document.getElementById('ajax_product_results');

    if (searchInput && resultBox) {
      searchInput.addEventListener('input', function () {
        const query = this.value.trim();

        if (query.length < 2) {
          resultBox.innerHTML = '';
          resultBox.style.display = 'none';
          return;
        }

        const urlWithParam = ajaxUrl.includes('?') ? `${ajaxUrl}&query=${encodeURIComponent(query)}` : `${ajaxUrl}?query=${encodeURIComponent(query)}`;
        fetch(urlWithParam, {
             credentials: 'same-origin'
            })
        .then(response => response.json())
        .then(data => {
          console.log('Résultats reçus :', data);    
          resultBox.innerHTML = '';
          resultBox.style.display = 'block';

          data.forEach(product => {
            const li = document.createElement('li');
            li.textContent = `${product.id_product} - ${product.name}`;
            li.style.padding = '5px';
            li.style.cursor = 'pointer';

            li.addEventListener('click', () => {
              searchInput.value = `${product.id_product} - ${product.name}`;
              document.getElementById('selected_product_id').value = product.id_product;
              resultBox.style.display = 'none';

              if (productSelect) {
                productSelect.value = product.id_product;
              }
            });

            resultBox.appendChild(li);
          });
        })
        .catch(error => {
          console.error('Erreur AJAX :', error);
        });
      });

 - Ajax controller :

<?php

class Lk_MiseenformedesccourteAjaxProductsModuleFrontController extends ModuleFrontController
{
    public function displayAjax()
    {
        // Empêche l'affichage d'erreurs
        error_reporting(0);
        ini_set('display_errors', '0');

        header('Content-Type: application/json');

        $query = Tools::getValue('query');
        $results = [];

        if ($query) {
            $sql = '
                SELECT p.id_product, pl.name
                FROM '._DB_PREFIX_.'product p
                JOIN '._DB_PREFIX_.'product_lang pl ON (
                    p.id_product = pl.id_product 
                    AND pl.id_lang = '.(int)Context::getContext()->language->id.'
                )
                WHERE pl.name LIKE "%'.pSQL($query).'%"
                ORDER BY pl.name ASC
                LIMIT 10
            ';
            $products = Db::getInstance()->executeS($sql);

            foreach ($products as $product) {
                $results[] = [
                    'id_product' => (int)$product['id_product'],
                    'name' => $product['name'],
                ];
            }
        }

        die (json_encode($results));
        exit;
    }
}
 

Thank you for your help.

 

[Knowband Plugins]

You haven't mentioned what the issue is exactly.

 

[yoyo051]

Issue is when I tape +2 letters in the product Ajax field nothing happens.

 

Even if I see the result of the Ajax request in browser developer cosole.

[Webkul Solutions]

Hi,

 

After looking into the provided code snippet, it seems that the AJAX request is not reaching the controller to process the requested data.

 

We suggest you check after replacing the displayAjax with initContent in your controller, like:

 

public function displayAjax() -> public function initContent()

 

Thanks & Regards