IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Langage PHP Discussion :

Débutant Problème autocomplete


Sujet :

Langage PHP

  1. #1
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut Débutant Problème autocomplete
    Bonjour j'aimerais faire une forme d'autocomplete mais je suis assez perdu avec tout ces tuto c'est assez complexe et je ne comprend pas aidez moi !!
    N'oublie pas le pouce vert

  2. #2
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    Bonjour

    je ne devrais pas mais je vais te montrer comment faire on est le 8 mai après tout c'est fête ^^.

    Pour faire une autocomplete il te faut de l'ajax/js, du php, du css/html.

    Dans un premier temps je vais faire l'input et la liste :

    index.php :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    echo '<div class="autocomplete">';
    echo '<input type="text" id="word_id" onkeyup="autocomplete(\'#word_id\',\'#word_list_id\')">';
    echo '<ul id="word_list_id"></ul>';
    echo '</div>';

    ensuite un peut de css pour une mise en forme :

    style.css :
    Code css : 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
     
    .autocomplete
    {
    	height: 30px;
    	float: left;
    }
    .autocomplete input 
    {
    	height: 20px;
    	width: 200px;
    	padding: 3px;
    	border: 1px solid #cccccc;
    	border-radius: 0;
    }
    .autocomplete ul 
    {
    	width: 206px;
    	border: 1px solid #eaeaea;
    	position: absolute;
    	z-index: 9;
    	background: #f3f3f3;
    	list-style: none;
    }
    .autocomplete ul li 
    {
    	padding: 2px;
    }
    .autocomplete ul li:hover 
    {
    	background: #eaeaea;
    }

    après pour la magie et pour tout ce qui va déclencher les actions
    Code javascript : 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
     
    function autocomplete(objid,objlist) 
    {
    	var min_length = 0;
    	var keyword = $(objid).val();
    	if (keyword.length >= min_length) 
    	{
    		$.ajax({
    			url: 'autocomplete.php',
    			type: 'POST',
    			data: {keyword:keyword,objid:objid,objlist:objlist},
    			success:function(data)
    			{
    				$(objlist).show();
    				$(objlist).html(data);
    			}
    		});
    	} 
    	else 
    	{
    		$(objlist).hide();
    	}
    }
     
    function set_item(item,objid,objlist) 
    {
    	$(objid).val(item);
    	$(objlist).hide();
    }

    et ce qui va créer et renvoyer la liste du php :
    Code php : 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
     
    require_once './connectionsql.php';
     
    $pdo = conn_pdo();
     
    $txt = '';
    $keyword = '%'.$_POST['keyword'].'%';
     
    $sql = "SELECT * FROM table WHERE champ1 LIKE '{$keyword}' LIMIT 0, 10";
    foreach  ($pdo->query($sql) as $rs)
    {
    	lib = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['champ1']);
     
      $txt .= '<li onclick="set_item(\''.str_replace("'", "\'", $rs['champ1']).'\',\''.$_POST['objid'].'\',\''.$_POST['objlist'].'\')">'.$plat_lib.'</li>';
    }
     
    $txt = utf8_encode($txt);
    echo $txt;

    et voila c'est assez complexe mais en même temps simple
    N'oublie pas le pouce vert

  3. #3
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    oh merci beaucoup mais j'aurais plusieur question deja qu'est ce que tu inclue dans ton dernier fichier au tout debut
    N'oublie pas le pouce vert

  4. #4
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    C'est ma connexion a ma bdd avec pdo je te donne un exemple :

    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
     
    function conn_pdo()
    {
      try
      {
          $pdo = new PDO('mysql:host=*****;dbname=******','**login**','**pass**');
          $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $pdo->setAttribute(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY, true);
          return $pdo;
      }
      catch(Exception $e)
      {
          echo 'Erreur : '.$e->getMessage().'<br />';
          echo 'N° : '.$e->getCode();
          exit();
      }
    }
    N'oublie pas le pouce vert

  5. #5
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    Et si je souhaite rajouter des actions pour faire apparaitre autrement ma liste ou la faire disparaitre stp
    N'oublie pas le pouce vert

  6. #6
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    Rien de plus simple l'amis tu rajoute les evenements suivant :

    - ondblclick : pour le double clique
    - onblur : quand l'objet perd le focus

    exemple :

    index.php
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    echo '<div class="autocomplete">';
    echo '<input type="text" class="form-control" id="word_id" onkeyup="autocomplete(\'#word_id\',\'#word_list_id\')" ondblclick="autocomplete(\'#word_id\',\'#word_list_id\')" onblur="out_focus(\'#word_list_id\')">';
    echo '<ul id="word_list_id"></ul>';
    echo '</div>';

    et tu rajoute cette fonction dans ton script.js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    function out_focus_plat(objlist)
    {
    	setTimeout(function()
    	{
    		$(objlist).hide();
    	}, 250);
    }
    voila voila
    N'oublie pas le pouce vert

  7. #7
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    Merci beaucoup mais une dernière question a quoi sers cette fonction "setTimeout" dans ce cas la
    N'oublie pas le pouce vert

  8. #8
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    C'est un moyen que j'ai trouvé pour que si tu clique sur la liste que la liste ne disparaît pas avant donc je met un petit timer pour éviter cela
    N'oublie pas le pouce vert

  9. #9
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    Vraiment merci je vais bosser la dessus
    N'oublie pas le pouce vert

  10. #10
    Membre régulier
    Avatar de sourcilpower
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2011
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : Janvier 2011
    Messages : 128
    Points : 124
    Points
    124
    Billets dans le blog
    2
    Par défaut
    Pas de soucis bon courage
    N'oublie pas le pouce vert

Discussions similaires

  1. [Débutant] Problème de variables
    Par bonnefr dans le forum SWT/JFace
    Réponses: 9
    Dernier message: 12/05/2004, 18h41
  2. Réponses: 2
    Dernier message: 28/04/2004, 12h25
  3. [Débutant] Problème de déconnexion d'une page JSP
    Par amal9 dans le forum Servlets/JSP
    Réponses: 12
    Dernier message: 22/01/2004, 14h40
  4. [débutant] Problèmes avec CRegKey
    Par Pedro dans le forum MFC
    Réponses: 4
    Dernier message: 10/11/2003, 16h28
  5. Réponses: 11
    Dernier message: 02/09/2003, 15h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo