Discussion :

[dev66es]

Bonjour à tous,

J'ai fait un système d'autocomplete qui fonctionne bien. L'idée c'est de remplir un input hidden en fonction de ce qui est sélectionné dans l'input avec l'autocomplete.
Mon problème c'est que si on sélectionne une valeur de l'autocomplete puis qu'on l'efface mon input hiddden garde la dernière valeur sélectionnée. Je voudrais qu'il ce vide.

Voici mon code :

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
    <input type="text" id="recherche" name="recherche" />
    <input type="hidden" id="hidden" name="hidden" value="" />
    <button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> Test</button>
</form>

JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$('#recherche').autocomplete({
 
var liste = [{"value":"Hayward Pool Vac Ultra","pid":"65"},{"value":"Alarme Prima protect","pid":"66"},{"value":"Alarme Ocea Protect S","pid":"67"}];    
 
source : liste,
    minLength : 3,
    select : function(event, ui){
        $('#hidden').val( ui.item.pid );
    }
});

Comment faire pour que l'input nommé "hidden" se vide (value='' ou value='0') lorsque l'input nommé "recherche" est vide ?

Par avance merci à tous.

[Doksuri]

avec onchange ?

[dev66es]

Oui j'y ai pensé, mais cela risque de vider mon input hidden à chaque changement de valeur de l'autocomplete. Non ?
A quoi avais tu pensé avec onchange ?
Je ne suis pas très calé en JS / Jquery

[Doksuri]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('recherche').addEventListener('keyup', function() {
document.getElementById('hidden').value = this.value;
});

en fait c'etait keyup et non onchange a quoi je pensais, pardon

[NoSmoking]

Bonjour,
document.getElementById en utilisant jQuery !?!

[dev66es]

@Doksuri :
Merci de ta proposition. Keyup n'est peut être pas la solution la plus efficace dans mon cas. Cela risque de faire des "faux positifs" (ex : quelqu'un qui efface qu'une partie du champ autocomplete ou tout simplement qui appuis sur une touche sans faire exprès etc...)

J'avais tenté ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$("#recherche")
  .change(function () {
    if($("#recherche").val()==''){
        $("#hidden").val('');
    }
  })
  .change();

Mais ça ne marche pas très bien... Il faut cliquer en dehors de l'input d'autocomplete avant de valider le formulaire pour que le hidden se vide.

[Doksuri]

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#recherche').on('keyup', function() {
$('#hidden').val($(this).val());
});

c'est ca la version jquery ?

je ne comprends pas en quoi c'est genant qu'il efface une partie du champ : le hidden se mettra a jour pareil.
s'il appuis sur une touche sans faire expres, c'est pareil, ca mettra a jour le hidden.
=> l'event est sur #recherche, pas sur l'integralite de la page