Intégrer autocomplete Jquery dans module BackOffice

[Gawel91]

Bonjour tout le monde, voilà j'ai un soucis j'ai créé un nouveau module basé sur newproducts déjà existant, et j'aimerai que dans le Back-Office on puisse, grâce à un text box et la fonction autocomplete de Jquery, choisir facilement des produits manuellement pour remplacer quelques "nouveaux produits" choisis automatiquement sur le front-office.

 

Voici donc mon code de la fonction displayForm() du fichier php du module pour la partie back-office :

 

public function displayForm()
{
 $query = 'SELECT id_product, name FROM '._DB_PREFIX_.'product_lang WHERE id_lang = '.(int)Context::getContext()->language->id;
 $products = Db::getInstance()->ExecuteS($query);
 $qtyproducts = count($products);

/*   $query = Tools::getValue('q', false);
 if (!$query OR $query == '' OR strlen($query) < 1)
  die();
*/

 $array=array();
 foreach($products as $member=>$data)
 {
  $array[$member]=$data;
 }
 $output = '
 <script type="text/javascript">
  var arr = "<?php echo json_encode($array); ?>";
  $(document).ready(function() {
$( "#autocomp" ).autocomplete({
 source: arr
});
  });
 </script>

// En dessous jai pas touché grand chose, juste quelques input box rajoutés

 <form action="'.Tools::safeOutput($_SERVER['REQUEST_URI']).'" method="post">
 <fieldset><legend><img src="'.$this->_path.'logo.gif" alt="" title="" />'.$this->l('Settings').'</legend>
<label>'.$this->l('Products to display.').'</label>
 <div class="margin-form">
  <input type="text" name="productNbr" value="'.(int)(Configuration::get('NEW_PRODUCTS_NBR')).'" />
  <p class="clear">'.$this->l('Define the number of products to be displayed in this block.').'</p>
 </div>
 <label>'.$this->l('Always display this block.').'</label>
 <div class="margin-form">
  <input type="radio" name="always_display" id="display_on" value="1" '.(Tools::getValue('always_display', Configuration::get('PS_BLOCK_NEWPRODUCTS_DISPLAY')) ? 'checked="checked" ' : '').'/>
  <label class="t" for="display_on"> <img src="../img/admin/enabled.gif" alt="'.$this->l('Enabled').'" title="'.$this->l('Enabled').'" /></label>
  <input type="radio" name="always_display" id="display_off" value="0" '.(!Tools::getValue('always_display', Configuration::get('PS_BLOCK_NEWPRODUCTS_DISPLAY')) ? 'checked="checked" ' : '').'/>
  <label class="t" for="display_off"> <img src="../img/admin/disabled.gif" alt="'.$this->l('Disabled').'" title="'.$this->l('Disabled').'" /></label>
  <p class="clear">'.$this->l('Show the block even if no products are available.').'</p>
 </div>
 <label>'.$this->l('Insert products you want to be displayed here (optional).').'</label>
 <div class="margin-form">
  <p class="clear">Produit #1 </p>
   <input type="text" name="q" id="autocomp" />
 </div>
 <center><input type="submit" name="submitBlockNewProducts" value="'.$this->l('Save').'" class="button" /></center>
</fieldset>
  </form>';
 return $output;
}

 

 

 

Donc j'arrive bien à faire la requête pour les produits, j'arrive à récuperer la variable de PHP à Javascript, mais je n'arrive pas à faire l'autocomplétion en elle-même, j'ai cherché partout sur Internet mais la configuration Prestashoop ne permet pas toujours d'utiliser des autres fichiers, etc.

 

Quelqu'un pourrait m'aider ? Merci.

Edited April 12, 2013 by Gawel91 (see edit history)

[CorentinDav]

up

 

j'essaye aussi d'integrer un champ text d'autocompletion pour les produits.

 

je me suis calqué sur l'ajout d'accessoires à un produit mais je n'arrive pas a avoir l'autocompletion

[J. Danse]

Bon. Quelle version de PrestaShop, dans les deux cas ?

[CorentinDav]

c'est la derniere version 1.5

[Gawel91]

Bonjour,

 

Désolé je n'ai pas vu les réponses de suite, entre temps j'ai résolu ce problème et l'autocomplete marche parfaitement, et effectivement j'avais fait comme Corentin en regardant sur celui d'ajout d'accessoires.

 

Il faut faire un peu comme cela :

 

public function displayForm()
{
$this->context->controller->addJqueryUI('ui.autocomplete.js' );
$output = '
  <script type="text/Javascript">
var numID;
$(function() {
 var counter = 0;
 $("#newField").click(function() {
  counter += 1;
  var newItem = $("<input type=\'text\' style=\"display:block;\" id=\"prodID[" + counter +"]\" onfocus=\'numero(this.id)\' class=\'autocomp\' name=\'productList[]\' /><input type=\"hidden\" name=\"product[]\" id=\"hiddenID[" + counter +"]\" />");
  $("#fields > p").append(newItem);
  $(\'.autocomp\').autocomplete(\'ajax_products_list.php\', {
  minChars: 1,
  autoFill: true,
  max:20,
  matchContains: true,
  mustMatch:true,
  scroll:false
  }).result(function(event, data, formatted) {
   var hiddF = document.getElementById(\'hiddenID[\'+numID+\']\');
   hiddF.value = data[1];
  });
 });
});
</script>
... code HTML...
<div id="fields">
  <p>
	   <input type="text" style="display:block;" class="autocomp" onfocus="first()" name="productList[]" id="firstField" />
	    <input type="hidden" value="" name="product[]" id="hiddenID[0]" />
   </p>
</div>

 

A adapter selon vos désirs. N'oubliez pas les champs hidden pour récupérer les valeurs id produits.

Dans mon cas j'ai fait un truc plus compliqué, avec ajout de champs dynamiques pour ajouter un ou plusieurs produits, autocomplétion dessus, puis tableau drag and drop pour gérer l'ordre de ces produits.

Edited May 3, 2013 by Gawel91 (see edit history)