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

jQuery Discussion :

autocomplete jQuery


Sujet :

jQuery

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    414
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2007
    Messages : 414
    Par défaut autocomplete jQuery
    Bonjour à tous,

    Je souhaite utiliser l'autocomplete de jQuery.
    Depuis qq heures, malgré un ratissage intensif du Web, je galère pour faire fonctionner le template remote datasource de Autocomplete Widget.

    Mon html :
    Code html : 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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Remote datasource</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="FS/demo.css" />
    <style>
    .ui-autocomplete-loading {
            background: white url('Images/ajax-loader-EIP-2.gif') right center no-repeat;
    }
    </style>
    <script>
    $(function() {
            function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
             }
     
            $( "#birds" ).autocomplete({
                    source: "searchAutoComplete.php",
                    minLength: 4,
            select: function( event, ui ) {
          log( ui.item ?
            "Selected: " + ui.item.value + " aka " :
            "Nothing selected, input was " + this.value );
        },
      });
    });
     
    </script>
    </head>
    <body>
     
    <div class="ui-widget">
      <label for="birds">Birds: </label>
      <input name="" type="text" id="birds" />
    </div>
     
    <div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
      Result:
      <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
    </div>
     
     
    </body>
    </html>

    mon PHP searchAutoComplete.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
    <?php
    include("Param/Connexion.php");
    $term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends
    $sql = "SELECT  Email as value 
    	FROM Comp_init
    	WHERE Email LIKE  '".$term."%'";
    $result = mysql_query($sql);//query the database for entries containing the term
    while ($row = mysql_fetch_assoc($result))//loop through the retrieved values
    {
    		$row['value']=htmlentities(stripslashes($row['value']));
    		$row_set[] = $row;//build an array
    }
    echo json_encode($row_set);//format the array into json data
    ?>

    le json retourné est de la forme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    [{"value":"aaaaaa@free.fr"}]
    Pourquoi ce script de fonctionne-t-il pas sachant qu'il n'y a pas de retour dans
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="ui-widget" style="margin-top: 2em; font-family: Arial;">

    Si qqu'un a une explication ... d'avance merci

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Format incorrect !

    UI Autocomplete veut : [ { label: "Choice1", value: "value1" }, ... ].

    Voir : http://api.jqueryui.com/autocomplete/#option-source

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    414
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2007
    Messages : 414
    Par défaut
    Merci pour ta réponse.
    maintenant j'obtiens
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    [{value:"aaaaaa@free.fr"}]
    Mais le script ne renvoie aucune valeur malgré le fait qu'il en existe au moins une ???!!!!

    Encore une bonne idée ?

    Cdlt

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 04/05/2011, 11h06
  2. Recherche de type Autocomplete (JQuery ou YUI) combiné avec Select
    Par FrankOVD dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/04/2011, 15h51
  3. Réponses: 0
    Dernier message: 27/02/2011, 22h06
  4. Réponses: 1
    Dernier message: 18/08/2010, 17h33
  5. Autocomplete jquery
    Par saryry dans le forum jQuery
    Réponses: 5
    Dernier message: 20/07/2009, 19h07

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