Vider un input quand autocomplete est vide

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:

---

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:

---

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.

avec onchange ?

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 :mrgreen:

Code:

---

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

Bonjour,
document.getElementById en utilisant jQuery !?!

@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:

---

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.

Code:

---

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

Citation:

---

c'est ca la version jquery ?

---

:ccool:


Tu peux regarder du côté de

Code:

---

1 2 3

$("element").on("input", function() { // ton code }

---