Bonjour à vous,

j'ai réalisé un petit script basique pour une autocomplétion. Il permet d'avoir plusieurs champs dans la page avec de l'autocomplétion. Il fonctionne très bien sous Firefox. Sous IE, le script AJAX fonctionne sans problème (les suggestions sont bien rappatriées) mais la mise à jour de la DIV de suggestion ne se fait pas. Une DIV vide apparait alors ...

l'evenement est déclenché via un "onkeyup" comme ceci :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
onkeyup="autocomplete(source,table,champ);"
avec :
  • source => le champ sur lequel est déclenché l'evenement (this dans le code HTML)
  • table => la table SQL dans laquelle cherché les suggestions
  • champs => le champ SQL dans lequel cherché les suggestions
Le code JS est le suivant :
Code : 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var _div_auto = init_autocomplete();
 
function autocomplete(source,table_sql,champ_sql) {
    if(source.value.length > 0) {
      new Ajax.Request(
        'ajax/autocomplete.php',
        {
          method: 'post',
          parameters: {q: source.value,table: table_sql,champ: champ_sql,s: source.id},
          onSuccess: function(transport) {
              var response = transport.responseText;
              if(response != '-1') {
                $(source).parentNode.appendChild(_div_auto);
                //Element.update('div_autocomplete',transport.responseText);
                $('div_autocomplete').update(response);
                $('div_autocomplete').style.display = "block";
                $('div_autocomplete').update(response);
                //$('test').update(response);
                if (isIe()) {
                    $('div_autocomplete').onmouseleave = function(){ timeoutglobalvar = setTimeout(function(){$('div_autocomplete').style.display = "none";},300); };
                    $('div_autocomplete').onmouseover = function(){ clearTimeout(timeoutglobalvar)};
                } else {
                    $('div_autocomplete').onmouseout = function(){ timeoutglobalvar = setTimeout(function(){$('div_autocomplete').style.display = "none";},300); };
                    $('div_autocomplete').onmouseover = function(){ clearTimeout(timeoutglobalvar)};
                }
              }
              else
                if($('div_autocomplete') != null) {
                  $('div_autocomplete').style.display = 'none';
                }
          },
          onFailure: function() { alert('Une erreur c\'est produite. Rechargez la page.')}
        }
      );
    }
    else {
        if($('div_autocomplete') != null) {
          $('div_autocomplete').style.display = 'none';
         }
    }
}
 
function init_autocomplete() {
  var div_autocomplete = document.createElement('div');
  Element.extend(div_autocomplete);
  div_autocomplete.id='div_autocomplete';
  div_autocomplete.className="autocomplete";
  return div_autocomplete;
}
 
function autocomplete_close(source,value) {
  $(source).value = value;
  $('div_autocomplete').style.display = "none";
  Element.remove($('div_autocomplete'));
}
et le code PHP est le suivant :

Code : 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
<?php
 
/**
 *
 *
 * @version $Id$
 * @copyright 2008
 */
 
require_once('bdd.class.php');
 
foreach($_POST as $key=>$val)
  $$key=$val;
 
$bdd = new bdd();
 
$tab = $bdd->getInfo($q, $table, $champ);
if($tab != null){
    echo '<table id="table_autocomplete">';
    for($i=0;$i<sizeof($tab);$i++) {
        echo '<tr class="tr_autocomplete" onMouseOver="this.className=\'tr_autocomplete_over\'" onMouseOut="this.className=\'tr_autocomplete\'"><td onclick="autocomplete_close(\''.$s.'\',\''.$tab[$i].'\');">'.$tab[$i].'</td></tr>';
    }
    echo '</table>';
}
else
    echo '-1';
?>
Est-ce que quelqu'un voit le soucis?
Je répete donc que le problème est que la DIV apparait bien en-dessous du champ texte mais est VIDE (sous IE)

Merci par avance