Script javascript qui ne s'applique pas

kd13 Messages postés 102 Statut Membre -  
kd13 Messages postés 102 Statut Membre -
Bonjour,

j'ai un code javascript "autocomplete" qui s'applique sur un champ de formulaire de type texte .
la valeur de ce champ est charge de ma base de donnès de cette facon :

while( $result = mysql_fetch_array($requete) ){

echo ("<p id=\"auto\">") ;

echo ("<input id=\"searchField\" name=\"searchField\" type=\"text\" value=\"".$result["nomcompte"]."\" AUTOCOMPLETE=\"OFF\" />");

le probleme c'est que le script s'applique une seule fois sur la premiere ligne !
comment je peux rendre le script appliquè sur tous les lignes !
merci d'avance !

9 réponses

  1. Mihawk Messages postés 4753 Statut Contributeur 846
     
    Hello,

    Qu'entends-tu par "le script s'applique une seule fois sur la premiere ligne" ?
    Le PHP ne charge qu'une ligne ?
    Ou bien le PHP charge tout mais cela ne fonctionne qu'avec une des lignes affichées ?
    1
    1. kd13 Messages postés 102 Statut Membre 1
       
      non le php charge tout mais cela ne fonctionne qu'avec une des lignes affichées
      0
    2. kd13 Messages postés 102 Statut Membre 1
       
      je suis debutant et jè pas bien compris mon ami aidez moi svp
      0
  2. AssassinTourist Messages postés 409 Date d'inscription   Statut Contributeur Dernière intervention   1 313
     
    Bonjour,

    Autocomplete se fait à partir de l'id de ton input ? Le problème peut venir du fait que tous tes input auront le même id (d'après ton code php, ce serait searchField) Il faut alors les différencier.
    0
    1. Mihawk Messages postés 4753 Statut Contributeur 846
       
      Pff moi aussi j'avais vu le problème. Mais j'affinais l'énoncé avant de le dire ^^
      0
    2. AssassinTourist Messages postés 409 Date d'inscription   Statut Contributeur Dernière intervention   1 313
       
      Rho, le jaloux =)
      0
    3. kd13 Messages postés 102 Statut Membre 1
       
      non seul ce input qui a l'id searchfield
      0
    4. Mihawk Messages postés 4753 Statut Contributeur 846
       
      Oué :-P
      Pour compléter la réponse à notre internaute en détresse : une des règles principales du HTML est que les ID sont uniques ! Les classes, elles, peuvent être utilisés plusieurs fois.

      Si tous les div ont le même ID, comment veux-tu que le JS les distingue ? Il s'arrête sur le premier qu'il trouve car il part du principe que ça sera le seul :-)
      0
    5. Mihawk Messages postés 4753 Statut Contributeur 846
       
      Ah-bon ?
      Pourtant tu as l'air de mettre cet ID dans le while ; donc tous les éléments l'auront !
      0
  3. Mihawk Messages postés 4753 Statut Contributeur 846
     
    Bon, reprenons.
    Qu'appelles-tu ton "script" ?
    Dans quel langage est-il écrit ?
    Peux-tu nous poster son code ?
    0
  4. kd13 Messages postés 102 Statut Membre 1
     
    "autocomplete.js il est ecrit en javascript !

    voila le code :

    // global variables
    var acListTotal = 0;
    var acListCurrent = -1;
    var acDelay = 500;
    var acURL = null;
    var acSearchId = null;
    var acResultsId = null;
    var acSearchField = null;
    var acResultsDiv = null;

    function setAutoComplete(field_id, results_id, get_url)
    {

    // initialize vars
    acSearchId = "#" + field_id;
    acResultsId = "#" + results_id;
    acURL = get_url;

    // create the results div
    $("#auto").append('<div id="' + results_id + '"></div>');

    // register mostly used vars
    acSearchField = $(acSearchId);
    acResultsDiv = $(acResultsId);

    // reposition div
    repositionResultsDiv();

    // on blur listener
    acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });

    // on key up listener
    acSearchField.keyup(function (e) {

    // get keyCode (window.event is for IE)
    var keyCode = e.keyCode || window.event.keyCode;
    var lastVal = acSearchField.val();

    // check an treat up and down arrows
    if(updownArrow(keyCode)){
    return;
    }

    // check for an ENTER or ESC
    if(keyCode == 13 || keyCode == 27){
    clearAutoComplete();
    return;
    }

    // if is text, call with delay
    setTimeout(function () {autoComplete(lastVal)}, acDelay);
    });
    }

    // treat the auto-complete action (delayed function)
    function autoComplete(lastValue)
    {
    // get the field value
    var part = acSearchField.val();

    // if it's empty clear the resuts box and return
    if(part == ''){
    clearAutoComplete();
    return;
    }

    // if it's equal the value from the time of the call, allow
    if(lastValue != part){
    return;
    }

    // get remote data as JSON
    $.getJSON(acURL + part, function(json){

    // get the total of results
    var ansLength = acListTotal = json.length;

    // if there are results populate the results div
    if(ansLength > 0){

    var newData = '';

    // create a div for each result
    for(i=0; i < ansLength; i++) {
    newData += '<div class="unselected">' + json[i] + '</div>';
    }

    // update the results div
    acResultsDiv.html(newData);
    acResultsDiv.css("display","block");

    // for all divs in results
    var divs = $(acResultsId + " > div");

    // on mouse over clean previous selected and set a new one
    divs.mouseover( function() {
    divs.each(function(){ this.className = "unselected"; });
    this.className = "selected";
    })

    // on click copy the result text to the search field and hide
    divs.click( function() {
    acSearchField.val(this.childNodes[0].nodeValue);
    clearAutoComplete();
    });

    } else {
    clearAutoComplete();
    }
    });
    }

    // clear auto complete box
    function clearAutoComplete()
    {
    acResultsDiv.html('');
    acResultsDiv.css("display","none");
    }

    // reposition the results div accordingly to the search field
    function repositionResultsDiv()
    {
    // get the field position
    var sf_pos = acSearchField.offset();
    var sf_top = sf_pos.top;
    var sf_left = sf_pos.left;

    // get the field size
    var sf_height = acSearchField.height();
    var sf_width = acSearchField.width();

    // apply the css styles - optimized for Firefox
    acResultsDiv.css("position","absolute");
    acResultsDiv.css("left", sf_left - 2);
    acResultsDiv.css("top", sf_top + sf_height + 5);
    acResultsDiv.css("width", sf_width - 2);
    }

    // treat up and down key strokes defining the next selected element
    function updownArrow(keyCode) {
    if(keyCode == 40 || keyCode == 38){

    if(keyCode == 38){ // keyUp
    if(acListCurrent == 0 || acListCurrent == -1){
    acListCurrent = acListTotal-1;
    }else{
    acListCurrent--;
    }
    } else { // keyDown
    if(acListCurrent == acListTotal-1){
    acListCurrent = 0;
    }else {
    acListCurrent++;
    }
    }

    // loop through each result div applying the correct style
    acResultsDiv.children().each(function(i){
    if(i == acListCurrent){
    acSearchField.val(this.childNodes[0].nodeValue);
    this.className = "selected";
    } else {
    this.className = "unselected";
    }
    });

    return true;
    } else {
    // reset
    acListCurrent = -1;
    return false;
    }
    }
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Mihawk Messages postés 4753 Statut Contributeur 846
     
    Alors c'est ce qu'on te dit.
    Le script JS a l'air de contenir du jquery qui appelle un div dont l'ID est "searchField".

    Or toi sur ta page tu positionnes plusieurs div dont l'ID est "searchField".
    Le script s'arrête donc toujours sur le premier.

    Essaye tu verras : charge ta page et essaye, seul le premier fonctionnera. Ensuite tu supprime le premier div (avec firebug) et le 2e marchera ; et ainsi de suite.

    Je pense que ce script JS (tout fait non ?) ne fonctionne que pour un seul div de recherche... Pour en gérer plusieurs il faudrait que tu passe l'ID du div en paramètre de la méthode.
    0
    1. kd13 Messages postés 102 Statut Membre 1
       
      non bro j'ai un seul <input> qui a l id searchfield
      0
  7. AssassinTourist Messages postés 409 Date d'inscription   Statut Contributeur Dernière intervention   1 313
     
    Oui attends...

    Dans ta requête en php, tu n'as qu'une seule valeur, c'est ça ? (parce que sinon tu aurais tes input en plus d'une fois ! ou sinon ça plante...)
    Tu as aussi mis autocomplete seulement dans ta première balise, c'est normal ?
    0
  8. kd13 Messages postés 102 Statut Membre 1
     
    desolè mais jai pas compris ou est le probleme dans le code .. :/
    0
  9. AssassinTourist Messages postés 409 Date d'inscription   Statut Contributeur Dernière intervention   1 313
     
    Moi je parle de ton code php

    Tu as (en simplifié) :
    while( $result = mysql_fetch_array($requete) ){
    <input id="searchField" />
    <inputs ... />
    }

    Tu as plusieurs résultats dans ton $requete ? (et donc plusieurs lignes de $result ?)
    0
  10. kd13 Messages postés 102 Statut Membre 1
     
    oui j'ai plusieur resultats

    c'est un affichage de donnès a partir d'une bdd
    0
    1. AssassinTourist Messages postés 409 Date d'inscription   Statut Contributeur Dernière intervention   1 313
       
      Oui, donc : tu auras plusieurs input qui auront le même id (searchField), un pour chaque $result. Tu peux les différencier comme ça par exemple :

      int i =0;
      while( $result = mysql_fetch_array($requete) ){
      <input id="searchField_i" />
      <inputs ... />
      i++;
      }

      (ou avec l'id de ton result, mais ça, ça dépend de ta requête)
      0
    2. kd13 Messages postés 102 Statut Membre 1
       
      merci bien AssassinTourist mais ca marche pas

      $i=0;
      while( $result = mysql_fetch_array($requete) ){
      echo ("<p id=\"auto\">") ;

      echo ("<input id=\"searchField_".$i."\" type=\"text\" value=\"".$result["nomcompte"]."\" AUTOCOMPLETE=\"OFF\" />");

      /-- les autres input --/

      $i=$i+1;
      0