Discussion :

[foldi3]

Tout d'abord bonjour à tous, je suis nouveau ici,
pour la petite présentation, de métier je suis ébeniste et passiné d'informatique.
J'ai développer pour mon entreprise une petite appli sous forme de site internet responsive pour l'insertion de nos heures de travail. Il est ensuite possible pour l'administration de récupérer ces dernière par client ou par collaborateur facilement dans un fichier excel.

Je suis actuellement entrain de developper la V2 de ce projet et je bloque sur un petit souci avec l'autocomplète de Jquery.
Je fait une recherche dans ma BDD avec un fichier externe et j'ai besoin de savoir sur quelle table faire la recherche. J'ai donc deux bouton radio qui doivent me dire sur quelle table faire la recherche mais je n'arrive pas à les mettre à jour sans recharger ma page, voici mon script :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
  <p><input type="radio" onclick="search_by();" id="nom" name="search_by" value="nom" checked>Nom</p>
  <p><input type="radio" onclick="search_by();" id="ville" name="search_by" value="ville" >Ville</p>
 
<form method="POST">
<input type="text" id="txtAllowSearch" class="selector" name="label">
<input type="hidden" id="txtAllowSearchID" name="id">
<input type="submit" value="envoyer">
</form>
 
<?php
if(isset($_POST['id'])){echo '<p>ID : ' . $_POST['id'] . '</p>';}
if(isset($_POST['label'])){echo '<p>label : ' . $_POST['label'] . '</p>';}
?>
 
 
<script type="text/javascript">
 
var valeur='nom' ;
 
function search_by(){
valeur = document.querySelector('input[name="search_by"]:checked').value; 
alert('selection : '+valeur)
}
 
$('.selector').autocomplete({
  delay:100, //delais en milisecondes
  minLength: 2, //longueur minimum du texte
    source: './source.php?search_term='+valeur,
    select: function (event, ui) {
      event.preventDefault
        $("#txtAllowSearch").val(ui.item.label); // display the selected text
        $("#txtAllowSearchID").val(ui.item.id); // save selected id to hidden input
    }
});
 
</script>

la variable 'valeur' devrais prendre soit la valeur de 'nom' ou 'ville' mais cela ne fonctionne pas correctement.
Lorsque l'alert s'affiche la valeur est correct mais elle ne change pas ici : source: './source.php?search_term='+valeur,
donc ma recherche jquery ce fait toujours sur le nom

si une bonne ame peut me donner un petit coup de pouce je vous en serait super reconnaissant.

Salutations

Julien

[SpaceFrog]

Attention : preventDefault() manque les () ...

sinon :
http://jsfiddle.net/8y4j3vk6/1/

[foldi3]

Salut SpaceFrog,

Je te remercie pour ta réponse.
Cela fonctionne bien (meme avec mon script de base) mais à condition de rafraichir la page après la séléction. Ne serais-ce pas possible d'obtenir le même résultat sans rafraichir la page ?

voici le script complet

http://jsfiddle.net/x40w76m1/

Salutations

Julien

[SpaceFrog]

C'est en principe le but d'autocomplete: faire uen requete ajax sans recharger la page...

SI je ne me trompre pas ce sont les deux éléments de inputs de ton form que tu souhaites renseigner avec l'autocomplete ?

le traitement de l'autocomplete est sur la même page ?.??

Ce qui devrait se passer chronologiquement:

l'utilisateur remplit l'input
au click sur l'une des radio un ajax vers la page de traitement te retourne un json des réponses selon le radio coché
ses réponses sont mises dans les inputs sans rechargement de page...
le user peut alors soumettre le form ... avec là un rechargement de page