Autocomplétion ajax avec différents champs

Autocomplétion ajax avec différents champs - HTML/CSS - Programmation

Marsh Posté le 09-07-2013 à 12:44:57    

Bonjour !
 
Si le problème suivant a été traité, pourriez-vous me rediriger sur le post ? J'ai survolé le forum mais rien ne répond à mon problème.
 
Le problème est le suivant :
 
Je souhaite appliquer l'autocomplétion ajax sur différents champs input (exemple : Un sur les noms, un autre sur les prénoms, etc).
 
Jusque là tout va bien, mais je voudrais le faire avec un minimum de fichiers possibles pour que cela soit très pratique à utiliser.
 
Voici ici un bout concerné du formulaire :
 
----------------------

Code :
  1. <?php
  3. def_label("Principales compétences" );
  5. def_input_text("competence1", "text", $_POST['competence1'], "id=\"competence1_complete\" onkeyup=\"suggest_input(this.value, '#competence1_complete', '#suggestions_competence1', '#suggestions_liste_competence1', 'autocompletion_lists/get_liste_competence.php');\"" );
  7. echo "<br />";
  9. ?>
  11. <div class="suggestionsBox" id="suggestions_competence1" style="display: none;"> <img src="autocompletion_ajax/arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
  13.    <div class="suggestionList" id="suggestions_liste_competence1"></div>
  15. </div>


----------------------
 
def_label() est une fonction php. On saisit le string et le label est fait.
 
def_input_text("name", "type", "valeur par défaut", "autres options de la balise" ) est une fonction php aussi. Dans les autres options, on met ce que l'on veut : id, class, onchange, onkeyup, onblur, etc.
 
Les deux div en html servent pour voir les choix de l'autocomplétion.
 
On remarque dans le def_input_text() qu'il y a un onkeyup="...". C'est la fonction d'autocomplétion.
 
La voici ci-dessous:
 
----------------------

Code :
  1. function suggest_input(text, input_id, div_id, subdiv_id, file_dir){
  3.    if(text.length == 0){
  5.       $(div_id).fadeOut();
  7.    }
  9.    else{
  11.       $(input_id).addClass('load');
  13.       $.post(file_dir,
  15.       {queryString: ""+text+""},
  17.       function(data){
  19.          if(data.length >0){
  21.             $(div_id).fadeIn();
  23.             $(subdiv_id).html(data);
  25.             $(input_id).removeClass('load');
  27.          }
  29.       });
  31.    }
  33. }


----------------------
 
Comme vous le voyez, j'ai mis plein d'arguments en paramètre pour que tout soit très souple. Je ne voudrais pas avoir 2 fonctions avec que l'ID qui change pour 2 champs d'autocomplétion.
 
Pour comprendre tout cela, vous avez aussi besoin de savoir que contient un fichier de type "file_dir". Voici alors un exemple :
 
----------------------

Code :
  1. if(isset($_POST['queryString'])) {
  3.    $queryString = $_POST['queryString'];
  5.    if(strlen($queryString) >0) {
  7.       $query = "SELECT nom FROM liste_competence WHERE nom LIKE '%$queryString%' order by nom";
  9.       $result = mysql_query($query) or die("Problème de connexion à la base de données ! Merci de nous en informer !" );
  11.       if($query) {
  13.          echo'<ul>';
  15.          while ($row = mysql_fetch_array($result)) {
  17.             echo '<li onClick="fill(\''.$row['nom'].'\');">'.$row['nom']."\n".'</li>';
  19.          }
  21.          echo'</ul>';
  23.       }
  25.       else {
  27.          echo 'Problème de connexion à la base de données ! Merci de nous en informer !';
  29.       }
  31.    }
  33. }
  35. else {
  37.    echo 'Il ne devrait y avoir aucun accès direct à ce script !';
  39. }


----------------------
 
Je vous assure ici que la connexion est faite, qu'elle marche, etc, etc. Rien de bien spécial.
 
Ma première question commence ici : Y aurait-il un moyen d'avoir une fonction a la place de ce "file_dir". En effet, j'ai plusieurs fichiers comme ci-dessus avec comme SEULE différence le nom de la table. N'aimant pas avoir plein de fichiers quasi identiques, je voudrais vous demander si vous avez une solution pour ce problème.
 
Bon ceci n'est que le premier problème. Poursuivons dans le code. Il y a un appel de la fonction fill() dans la balise <li>.
 
Voici le code de cette fonction :
 
----------------------

Code :
  1. function fill(thisValue) {
  3.    $('#competence1_complete').val(thisValue);
  5.    setTimeout("$('#suggestions_competence1').fadeOut();", 0);
  7. }


----------------------
 
Vous remarquerez ici, que cette fonction marche que pour le champ "compétence1_complete".
 
Ce que je souhaiterai, ca serait plus une fonction du style :
 
----------------------

Code :
  1. function fill_input(thisValue, input_id, div_id){
  3.    $(input_id).val(thisValue);
  5.    setTimeout("$(div_id).fadeOut();", 0);
  7. }


----------------------
 
Comment faire pour que cela se rapproche plus de la fonction fill_input() au lieu de fill() ?
 
(Si vous pouviez me donner une solution pour remplacer le "file_dir" plus haut en une fonction, cela résoudrait également mon problème).
 
Je vous remercie d'avance.


Message édité par finaler le 09-07-2013 à 14:29:55
Reply

Marsh Posté le 09-07-2013 à 12:44:57   

Reply

Marsh Posté le 09-07-2013 à 13:19:28    

Je suis désolé mais j'ai pas pu lire jusqu'au bout, utilise des balises de codes car ce n'est pas évident sinon, en AJAX, tu ne reçois la réponse que du premier 'echo' donc regroupe toutes tes variables, après c'est peut être pas uniquement ça mais j'ai pas tout regarder, édite ton message et ajoute les balises de code


Message édité par sltpaulo le 09-07-2013 à 13:20:00
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed