[RESOLU] Champs autocomplete sous IE

par **orell1** » 23 juil. 2012, 23:24

Ah non non sur une page différente...

Je ne comprends vraiment pas ce problème et je ne sais même pas comment debugger cette histoire!

Merci quand même.

par AB » 23 juil. 2012, 19:36

Bonjour,
En revanche j'utilise ce champs autocomplete avec un autre formulaire et la tout fonctionne bien et sur tous les navigateurs...

Un autre formulaire dans la même page ? Si oui il pourrait peut-être y avoir un conflit...
Sinon comme déjà dit par xTG ce n'est certainement pas un problème de php (ou alors juste une histoire de format de sortie).
Difficile de t'en dire plus car perso j'utilise l'autocomplète de jquery UI.

par **orell1** » 23 juil. 2012, 16:30

Bonjour,
Merci pour ta réponse...
Voici ce que j'utilise: peut-être cela t'aidera peut-être...? http://www.nodstrum.com/2007/09/19/autocompleter/
J'ai essayé en local avec wamp, free et OVH et c'est la même chose, Internet Explorer ne l'accepte pas... En revanche j'utilise ce champs autocomplete avec un autre formulaire et la tout fonctionne bien et sur tous les navigateurs...

Je ne comprends plus rien
Voici celui qui fonctionne:

<!-- MODULE RECHERCHE CLIENT POUR AUTOCOMPLETE -->
<script type="text/javascript">
     //lookup
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("rpc_autocomplete_Utilisateur.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } 
    // fill
    function fill(selectedValue) {
        $('#inputString').val(selectedValue);
        setTimeout("$('#suggestions').hide()", 200);
        document.forms['f1'].action='?action=rechercher&motcle='+selectedValue;
		document.forms['f1'].submit();
    }
</script>

<style type="text/css">
	.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
                z-index: 100;
	}
	
	.suggestionList {
		margin: 0px;
		padding-left: 7px;
                z-index: 1000;
                text-align: left;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding-left: 7px;
		cursor: pointer;
                list-style-type: none;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
</style>

<form name="f_rech_util">
<div style="width:200px;height:20px;margin:0px;padding:0px;float:right;">
	

	<input style="width:138px;height:20px;font-size:8pt;float:right;text-align:center;" type="text" name="motcle" id="inputString" 
           value="<?php echo isset($motcle)?$motcle:''; ?>" title="Zone de Recherche" 
           onkeyup="lookup(this.value);" 
           onblur="" onclick="this.value='';" />
    <br/>
    <div class="suggestionsBox" id="suggestions" style="width:200px;display: none;float:right;">       
        <img id="btn_autoSuggestionsLis" src="images/fleche_haut3.png" style="position: relative; top: -12px; left: 30px;" 
             title="Fermer" alt="Fermer" onclick="OuvrirFermerCadre('suggestions');" />
        <div class="suggestionList" id="autoSuggestionsList"></div>
    </div>
</div>
</form> 
<!-- FIN MODULE RECHERCHE CLIENT POUR AUTOCOMPLETE -->

Et la le fichier qui est appelé:

<?php
require_once "classes/classes.php";
$base = new Base();
if(isset($_POST['queryString'])) 
{
    $queryString = addslashes($_POST['queryString']);
    $resultat = $base->exec("SELECT * FROM utilisateur WHERE LOWER(CONCAT(prenom,' ',nom)) LIKE LOWER(TRIM('%$queryString%')) ORDER BY prenom , nom LIMIT 10");
    
    if(is_array($resultat))
    foreach ($resultat as $i=>$ligne)
    {
        $valeur = $ligne->prenom." ".$ligne->nom;
        $index = str_replace(' ','_',trim($valeur));
        #
        echo '<li onClick="fill(\''.$valeur.'\');">'.$valeur.'</li>';
        #
        echo "<script> 
                utilisateur['".$index."_1'] = '".$ligne->pseudo."';
                utilisateur['".$index."_2'] = '".$ligne->nom."';
                utilisateur['".$index."_3'] = '".$ligne->prenom."';
                utilisateur['".$index."_4'] = '".$ligne->telFixe."';
                utilisateur['".$index."_5'] = '".$ligne->telPortable."';
                utilisateur['".$index."_6'] = '".$ligne->email."';
                utilisateur['".$index."_7'] = '".$ligne->adresse."';
                utilisateur['".$index."_8'] = '".$ligne->cp."';
                utilisateur['".$index."_9'] = '".$ligne->ville."';
                utilisateur['".$index."_10'] = '".$ligne->civilite."';    
            </script>";
    }
} 
?>

Peut-être que cela aidera...?

Merci bcp!

par AB » 23 juil. 2012, 12:22

Cela ne fonctionne pas ou la liste est mal positionnée ? Vérifie avec firebug ou un autre outil du même genre si le code html correspondant à ta liste est créé ou non, ca permettra d'orienter la solution. Sinon tu utilise jquery ?

par **xTG** » 23 juil. 2012, 10:34

Si c'est un problème de navigateur ce n'est certainement pas un problème côté serveur.
Donc forum PHP => mauvais choix.
J'ai signalé qu'on te déplace ton topic en forum javascript, tu auras peut être plus de réponses.

par **orell1** » 23 juil. 2012, 09:43

Personne ne sait...?

par **orell1** » 20 juil. 2012, 21:00

Bonjour,
Savez vous pourquoi mon champs autocomplete fonctionne sous firefox et non sous Internet Explorer?
Voici le champs de recherche:

<table id="rechercheContact" border="0" cellpadding="0" cellspacing="1" width="100%">
    <tr>
        <td valign="top"><h4>Mon contact est connu : Je Recherche mon contact dans la liste ou dans le champs de droite
			<a style="" target="blank" onclick="javascript:if(document.getElementById('ID_PERS').value.length>0) {this.href = '?codepage=EDITER_PERSONNE&action=afficher&pseudo=<?php echo isset($utilisateurRDV->pseudo)?$utilisateurRDV->pseudo:""; ?>&ID_PERS='+document.getElementById('ID_PERS').value+'';} else {alert('sélectionnez un contact avant!');}" title="Fiche Personne">
                <img src="images/btn_editer.png"  style="margin-right:15px;"/>
			</a> 
			<?php include ('champ_autocomplete_RDV.php'); ?>
		   </h4>
        </td>
    </tr>
    <tr style="height:5px"></tr>
    <tr >
        <td valign="top">
            <select  class="tailleUnique personnes" id="ID_PERS" name="ID_PERS" 
                     onchange="fill(this.value, this.options[this.selectedIndex].text);
                     $('#telFixeContact').val(contact[this.value].telFixe);
                     $('#telPortableContact').val(contact[this.value].telPortable);"
                     multiple="multiple" rows="5" style="width:100%">
                <?php 
                #
                # PREPARATION DES PERSONNES CONTACTS DE L'UTILISATEUR CONNECTE
                $motcle = trim(isset($_POST["motcle"])?$_POST["motcle"]:(isset($_GET["motcle"])?$_GET["motcle"]:""));
                $uContacts = $utilisateurRDV->getContacts();
                if (is_array($uContacts))
                {
                    if ($action=='rechercher') $ID_PERS = isset($uContacts[0])?$uContacts[0]->ID_PERS:"";
                    foreach($uContacts as $p)
                    {
                        if (isset($ID_PERS)&&$ID_PERS==$p->ID_PERS)
                        {
                            $nomContact = $p->nom;
                            $prenomContact = $p->prenom;
                            $telFixeContact = $p->telFixe;
                            $telPortableContact = $p->telPortable;
                            $emailContact = $p->email;
                        }
                        #
                        $selected = isset($ID_PERS)&&$ID_PERS==$p->ID_PERS?" selected=\"selected\" ":"";
                        echo "<option value=\"".$p->ID_PERS."\" $selected>".$p->prenom." ".$p->nom."</option>";
                    }
                }
                ?>
            </select> 
        </td>
    </tr>        
</table>

Et le fichier appelé pour la recherche:

<script type="text/javascript">
    // PARAMETRES GLOBAUX A MODIFIER EN CAS DE BESOIN
    var pseudoUtilisateur = '<?php echo isset($pseudo)?$pseudo:(isset($_GET['pseudo'])?$_GET['pseudo']:''); ?>'; // contact connecté
    /////////////////////////
    var contact = new Array;
    function lookup(inputString) {
         $.get("rpc_autocomplete_Personne.php", {pseudoUtilisateur: ""+pseudoUtilisateur+"", queryString: ""+inputString+""}, function(data){
            console.log(this.url);
            if(data.length >0) {
                contact = new Array();
                var retour = JSON.parse(data);
                //console.log(retour);
                contact = retour.contact;
                $('#autoSuggestionsList').html(retour.liste);
                if (inputString.length>0) $('#suggestions').show();
            }
        });
    } 
    // lookup
     
     $(document).ready(function(){
          lookup($('#inputString').val());
     });
    //
    function fill(index, selectedValue) {
        $('#inputString').val(selectedValue);
        setTimeout("$('#suggestions').hide();", 200);
        //
        $('#telFixeContact').val(contact[""+index+""].telFixe);
        $('#telPortableContact').val(contact[""+index+""].telPortable);
        //
        $('#ID_PERS').val(contact[""+index+""].ID_PERS);
    }
    //
    function OuvrirCadre(id)
    {
        var Cadre = document.getElementById(id);
        var boutonCadre = document.getElementById('btn_'+id);
        Cadre.style.display = 'block';
        boutonCadre.src = 'images/fleche_haut3.png';
        boutonCadre.alt = 'Fermer';
        boutonCadre.title = 'Fermer';
    }
    function FermerCadre(id)
    {
        var Cadre = document.getElementById(id);
        var boutonCadre = document.getElementById('btn_'+id);
        Cadre.style.display = 'none';
        boutonCadre.src = 'images/fleche_bas3.png';
        boutonCadre.alt = 'Ouvrir';
        boutonCadre.title = 'Ouvrir';
    }
    function OuvrirFermerCadre(id)
    {
        if (document.getElementById(id).style.display == 'none')
        {
            OuvrirCadre(id);
        }
        else
        {
            FermerCadre(id);
        }
    }
</script>

<style type="text/css">
	.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
                z-index: 100;
	}
	
	.suggestionList {
		margin: 0px;
		padding-left: 7px;
                z-index: 1000;
                text-align: left;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding-left: 7px;
		cursor: pointer;
                list-style-type: none;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
        .suggestionList li marquee {
            font-size: 0.8em;
            color: yellow;
        }
     
    .tailleUnique {
        width:94%;
    }

    input, select, textarea, button {
        
        margin: 0px 0px 0px 0px;
        padding: 4px 4px 4px 5px;
        
        overflow:auto;
        background-color: #fff;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 1px groove #000;
        color: #212427;       
    }      
    img {
        
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        background-color: transparent;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        /*border: 1px groove #000;*/
        color: #212427;       
    }  
    .element {
        margin: 0px 0px 0px 0px;
        padding: 4px 4px 4px 5px;

        /*background-color: #fff;*/
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 1px groove #000;	
        color: #212427;       
    }
    .Cadre {
        margin: 0px 0px 0px 0px;
	padding: 4px 4px 4px 5px;
        width: 99%;
        overflow:auto;
        background-color: #fff;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 1px groove #000;	
        color: #212427;
    }
    .Cadre tr:hover {
        background: silver;
    }
    .Cadre td,th {
        padding-left:5px;
    }
    .Cadre td,th {
        padding-left:5px;
    }
      
</style>

<div style="width:200px;height:20px;margin:0px;padding:0px;float:right;">
    
  <input style="width:138px;height:20px;font-size:8pt;float:right;text-align:center;" type="text" name="motcle" id="inputString" 
           value="<?php echo isset($motcle)?$motcle:''; ?>" title="Zone de Recherche" 
           onkeyup="lookup(this.value);" 
           onblur="" onclick="this.value='';"/>      
 
        <br/>
    <div class="suggestionsBox" id="suggestions" style="width:200px;display: none;float:right;">       
        <img id="btn_suggestions" src="images/fleche_haut3.png" style="position: relative; top: -12px; left: 30px;" 
             title="Fermer" alt="Fermer" onclick="OuvrirFermerCadre('suggestions');" />
        <div class="suggestionList" id="autoSuggestionsList"></div>
    </div>
</div>

Merci beaucoup par avance.

[RESOLU] Champs autocomplete sous IE

Répondre

Étendre la vue Revue du sujet : [RESOLU] Champs autocomplete sous IE

Re: Champs autocomplete sous IE

Re: Champs autocomplete sous IE

Re: Champs autocomplete sous IE

Re: Champs autocomplete sous IE

Re: Champs autocomplete sous IE

Re: Champs autocomplete sous IE

Champs autocomplete sous IE