11499 sujets

JavaScript, DOM et API Web HTML5

Jquery autocomplete fonctionne en partie

Bonjour,

En résumé, j'ai un formulaire qui lorsque je remplis mon champs référence me propose des références existante dans ma table produits fournisseurs correspondant à ce que je tape.
Et des que je choisis une des références de la liste cela me préremplis les autres champs de ma page (descriptif, prix ...)

Cela fonctionne en partie (certain champs se préremplissent et pas d'autres ce qui est totalement illogique vu que j'emploie la même technique)

alors j'ai réutilisé un tuto ainsi :

Voici mon fichier avec le formulaire :

dans le header du fichier avec formulaire :
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>


<form action="inserer.php" method="post" name="insereprodstock">
            
                <div class="label_div">Référence : </div>
                <div class="input_container">
                    <input type="text" id="ref_id" name="refprodstock" onkeyup="autocomplet()">
                    <ul id="ref_list_id"></ul>
                   
                </div>
               
                <br /><br />
              <div class="label_div">Descriptif produit : </div>
                    <textarea cols="50"  id="descriptif_id" name="descriptifprodstock" rows="10"></textarea>
                    
                  <br /><br />
              <div class="label_div">Tarif Vente : </div>   
                    <input name="tarifventeprodstock" id="tarifvente_id" type="text" value="0" size="50" />
                    
                
                    <br /><br />
              <div class="label_div">Fournisseur : </div>
                    <select name="idfournisseur" id="idfournisseur_id">
		<?php foreach($fournisseur as $row){ 
                            $idfournisseur=htmlspecialchars($row['idfournisseur'],ENT_QUOTES);
                            $nomfournisseur=htmlspecialchars($row['nomfournisseur'],ENT_QUOTES);
                            
                            ?>
                            <option value="<?php echo $idfournisseur; ?>" >
                               
                                    <?php 
                                    	
                                        echo $nomfournisseur;
                                    ?>
                               
                            </option>
                            
                            <?php } ?>
                        </select>

     <br /><br />
              <div class="label_div">LED : </div> 
                   <select name="ledprodstock" id="led_id">
                            <option value="0">Non</option>
                            <option value="1">Oui</option> 
                        </select>
                        
                      <br /><br />
              <div class="label_div">Max connect : </div>   
                        <input name="maxconprodstock" type="number" id="maxcon_id" step="1" min="0" value="0" size="50" />
                        
                         <br /><br />
              <div class="label_div">WATT : </div>   
                        <input name="wattprodstock" type="text" id="watt_id" value="0" size="50" />



Le code script.js


// autocomplet : this function will be executed every time we change the text
function autocomplet() {
	var min_length = 0; // min caracters to display the autocomplete
	var keyword = $('#ref_id').val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#ref_list_id').show();
				$('#ref_list_id').html(data);
			}
		});
	} else {
		$('#ref_list_id').hide();
	}
}

// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$('#ref_id').val(item);
	// hide proposition list
	$('#ref_list_id').hide();
}

function set_item2(item) {
	// change input value
	$('#descriptif_id').val(item);	
}
function set_item3(item) {
	// change input value
	$('#tarifvente_id').val(item);	
}

function set_item4(item) {
	// change input value
	$('#idfournisseur_id').val(item);	
}

function set_item5(item) {
	// change input value
	$('#led_id').val(item);	
}
function set_item7(item) {
	// change input value
	$('#maxcon_id').val(item);	
}
function set_item8(item) {
	// change input value
	$('#watt_id').val(item);	
}



Le fichier ajax refresh .php


$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM prodfournisseur WHERE refprodfournisseur LIKE (:keyword) ORDER BY idprodfournisseur ASC LIMIT 0, 10";
$query = $dbh->prepare($sql);



$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
	$descriptifprodfournisseur=htmlspecialchars($rs['descriptifprodfournisseur'],ENT_QUOTES);
	// put in bold the written text
	$refprodfournisseur = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['refprodfournisseur']);
	// add new option
    echo '<li onclick="
	set_item(\''.str_replace("'", "\'", $rs['refprodfournisseur']).'\');
	set_item2(\''.str_replace("'", "\'", $rs['descriptifprodfournisseur']).'\');
	set_item3(\''.str_replace("'", "\'", $rs['tarifventeprodfournisseur']).'\');
	set_item4(\''.str_replace("'", "\'", $rs['idfournisseur']).'\');
	set_item5(\''.str_replace("'", "\'", $rs['ledprodfournisseur']).'\');
	set_item7(\''.str_replace("'", "\'", $rs['maxconprodfournisseur']).'\');
	set_item8(\''.str_replace("'", "\'", $rs['wattprodfournisseur']).'\')
	">'.$refprodfournisseur.'</li>';
}




CA FONCTIONNE.
Lorsque je commence à taper une référence dans mon input text "ref_id" cela me propose les 10 résultats correspondant de ma base de donnée.
Lorsque je clique sur une des propositions, cela remplis mon input text ref_id et aussi les autres input (mais pas TOUS !!! c'est ca qui est illogique)
Mon champs descriptif se remplit.
Mon champs "<select>" Id fournisseur se modifie et propose le bon fournisseur correspondant à la référence choisie.
Mon champs tarifs se remplit aussi. PARFAIT
Mais de façon étrange les autres ne se remplissent pas.
le champs "led" est un <select> (comme pour idfournisseur mais la cela ne marche pas, ca ne se modifie pas)
et les champs input text "watt" et "maxcon" ne se remplisse pas non plus (alors que cela marche pour les tarifs par exemple)


J'ai essayé d'afficher la source de ma liste . crée par javascript pensant que l'erreur venait de là et elle transmet bien les bonnes données car cela me marque cela par exemple :


<ul style="display: block;" id="ref_list_id">
<li onclick="
	set_item('CIC-R-LED-3X0.7-230V-W-B');
	set_item2('Rideau Icicle LED caoutchouc - 3 x 0.70 m - 150 lampes bleues - fil blanc - 230 V');
	set_item3('52.1');
	set_item4('1');
	set_item5('1');
	set_item6('1');
	set_item7('12');
	set_item8('14');
	"><b>CIC-R</b>-LED-3X0.7-230V-W-B
</li>
<li onclick="
	set_item('CIC-R-LED-3X0.7-230V-W-R');
	set_item2('Rideau Icicle LED caoutchouc - 3 x 0.70 m - 150 lampes rouges - fil blanc - 230 V');
	set_item3('50.9');
	set_item4('1');
	set_item5('1');
	set_item6('1');
	set_item7('12');
	set_item8('14');
	"><b>CIC-R</b>-LED-3X0.7-230V-W-R
</li>
</ul>


Donc les données sont bien transmises au fichier script.js qui ont tous le même code (set_item8, set_item7, set_item2 ...) voir fichier script.js plus haut
Et certains marche et d'autres non.

C'est à n'y rien comprendre à moins qu'il y ait une faute de frappe mais cela n'a pas l'air.

MERCI de m'aider je dois rendre ce projet très très vite
Modérateur
Bonjour,

Ton code marche chez moi tel quel.

Je note cependant l'absence de fonction set_item6 dans script.js alors qu'elle apparait dans les traces de ton dernier encadré. A voir de ce côté si c'est ça le problème.

Amicalement,
Bonjour et merci de ta réponse.

Alors la fonction set_item6 existe mais je ne vous l'ai pas recopiée car ca faisait un doublon de plus, je ne voulais pas surcharger.

Désormais cela marche mais je n'arrive pas à l'expliquer.

J'ai juste changer l'id de mon input watt_id qui faisait bugger lui même et d'autres, en le remplacant par WW dans mon form et dans mon ajaxrefresh:

form :
<input name="wattprodstock" type="text" id="WW" value="0" size="50" />


et ajaxrefresh :
function set_item8(item) {
	// change input value
	$('#WW').val(item);	
}


C'est illogique mais ca marche ! Je comprends pas.
Bonjour,

Juste une petite chose, même si ça ne concerne pas directement ton problème, quand je vois ça :
function set_item(item) {
	// change input value
	$('#ref_id').val(item);
	// hide proposition list
	$('#ref_list_id').hide();
}

function set_item2(item) {
	// change input value
	$('#descriptif_id').val(item);	
}
function set_item3(item) {
	// change input value
	$('#tarifvente_id').val(item);	
}

function set_item4(item) {
	// change input value
	$('#idfournisseur_id').val(item);	
}

function set_item5(item) {
	// change input value
	$('#led_id').val(item);	
}
function set_item7(item) {
	// change input value
	$('#maxcon_id').val(item);	
}
function set_item8(item) {
	// change input value
	$('#watt_id').val(item);	
}

Moi, je vois ça :
function set_item(item, selecteur) {
	// change input value
	$(selecteur).val(item);
	if (selecteur=='#ref_id') $('#ref_list_id').hide();
}
Smiley cligne

EDIT : ou pour simplifier l'appel :
var itemTab = [
	"#ref_id",
	"#descriptif_id",
	"#tarifvente_id",
	"#idfournisseur_id",
	"#led_id",
	"#maxcon_id",
	"#watt_id"
];

function set_item(item, nbItem) {
	var selecteur = itemTab[nbItem];
	// change input value
	$(selecteur).val( item );

	// hide proposition list
	if (selecteur=='#ref_id') $('#ref_list_id').hide();
}


Et puis, après, évite d'utiliser les onclick dans l'html, mais essaie de gérer l'événement clic directement dans le JS.
Modifié par SolidSnake (18 Dec 2015 - 13:52)
Sujet clos
Aller à