web-dev-qa-db-fra.com

jquery ui autocomplete avec base de données

JQuery est assez nouveau pour moi et j'essaie peut-être de réaliser quelque chose qui pourrait être un peu plus difficile pour un débutant. Cependant, j'essaie de créer une saisie semi-automatique qui envoie la valeur actuelle à un script PHP, puis renvoie les valeurs nécessaires.

Voici mon code Javascript

$("#login_name").autocomplete({
    source: function(request, response) {
 $.ajax({
     url: "http://www.myhost.com/myscript.php",
     dataType: "jsonp",

     success: function(data) {
  alert(data);
  response($.map(data, function(item) {
      return {
   label: item.user_login_name,
   value: item.user_id
      }
  }))
     }
 })
    },
    minLength: 2
});

Et voici la dernière moitié de "myscript.php"

while($row = $Database->fetch(MYSQLI_ASSOC))
{
    foreach($row as $column=>$val) 
    {
        $results[$i][$column] = $val;
    }
    $i++;
}
print json_encode($results);

Qui produit la sortie suivante

[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}]

Quelqu'un peut-il me dire où je vais mal s'il vous plaît? Commencer à être assez frustré. Le champ de saisie devient simplement "blanc" et aucune option ne s'affiche. Le code fonctionne si je spécifie un tableau de valeurs.

UPDATEJ'ai changé le code en et je n'ai toujours pas eu de chance.

$("#login_name").autocomplete({
    source: "/ajax/login_name.php",
    dataType: "json",
    minLength: 2,
    cache: false,
    select: function(event, ui) {
        alert(ui);
    }
});

En utilisant l'outil de développement Web de FireFox, j'obtiens une erreur "b is null".

phpjqueryjsonuser-interfaceautocomplete
18
bigstylee

Enfin trouvé la solution qui correspond à mes besoins

$("#login_name").autocomplete({
  source: function(request, response){
    $.post("/ajax/login_name.php", {data:request.term}, function(data){     
        response($.map(data, function(item) {
        return {
            label: item.user_login_name,
            value: item.user_id
        }
        }))
    }, "json");
  },
  minLength: 2,
  dataType: "json",
  cache: false,
  focus: function(event, ui) {
    return false;
  },
  select: function(event, ui) {
    this.value = ui.item.label;
    /* Do something with user_id */
    return false;
  }
});
19
bigstylee

quelques suggestions:

  1. Pourquoi dataType= "jsop"? Il ne semble pas être jsonp. Je pense que tu veux "json".
  2. insérez également un cache : false dans les options. Cela garantit que la demande est toujours faite et jamais satisfaite par le cache du navigateur.
  3. vérifiez si l'appel est en cours, avec quelque chose comme Fiddler ou Charles.
  4. votre succès s'appelle-t-il? Vous avez une alert() ici. Est-il invoqué?
  5. si vous avez les outils de développement Firebug ou IE8, vous pouvez placer un point d'arrêt sur la alert() pour vérifier la valeur des paramètres.
  6. Pourquoi spécifier le nom d'hôte complet dans l'URL? La nuit dernière, j'ai eu une situation étrange avec la saisie semi-automatique où la réponse était nulle, la chaîne vide, lorsque j'ai utilisé un nom d'hôte différent pour la page et la demande Ajax. Lorsque je l'ai modifié pour utiliser le même nom d'hôte, la requête a abouti. En fait, à cause de la même politique d'origine, vous ne devriez avoir aucun nom d'hôte dans l'URL de l'appel ajax.
4
Cheeso

Si quelqu'un d'autre en a besoin:

La documentation pour l'auto-complétion dans l'interface utilisateur jQuery spécifie que le paramètre de chaîne de requête à utiliser est ' term ' et non 'q' ... ou du moins qu'il le fait maintenant.

E.g. http://www.myhost.com/myscript.php?term=someToSearchFor
2
CodeReaper

Oui, vous avez besoin d'informations d'en-tête pour votre JSON

        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
        header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
        header("Cache-Control: no-cache, must-revalidate" ); 
        header("Pragma: no-cache" );
        header("Content-type: text/x-json");

et tvanfosson fait un bon point contre le plug

dans tous les cas, je ne pense pas que vous appeliez le plugin ajax.

si vous utilisez en fait jquery-ui autocomple , vous devez lire la documentation pour obtenir une version de base en cours d'exécution. votre php va bien en dehors des données d'en-tête manquantes

2
mcgrailm

Simple Jquery ui autocomplete, pour ceux qui pourraient en avoir besoin.

//select data from the table
$search = $db->query('SELECT Title from torrents');

//then echo script tags and variables with php
<?php echo '<script type="text/javascript">
 $(function() {
  var availableTags = [';
 foreach ($search as $k) {
  echo '"'.$k['Title'].'",';
}
  echo '];
$( "#tags" ).autocomplete({
  minLength:2, //fires after typing two characters
  source: availableTags
});
});
</script>';

 ?>

votre formulaire html

<div id="search">
<form id="search-form">
<input id="tags" type="text" />
<input type="submit" value="Search" />
</form>
</div>
1
TenTen Peter

Une structure JSON est une chaîne plate, alors que map attend un tableau ou une structure semblable à un tableau. essayez json decode sur la chaîne avant d’utiliser map.

0
pinaki

J'ai eu un problème comme toi aussi. Et maintenant je le répare. Le problème est que mon JSON qui revient de mon serveur contient une erreur de syntaxe.

Dans http://api.jquery.com/jQuery.getJSON/ indique que s'il existe une erreur dans JSON, celle-ci échouera de manière silencieuse. Le JSON doit correspondre à la norme JSON ici http://json.org/ .

Car mon erreur est que ma chaîne en JSON est encapsulée dans une seule citation. Mais la norme JSON accepte uniquement les chaînes placées entre guillemets.

par exemple. "Hello World" n'est pas "Hello World"

Lorsque vous corrigez ce problème, vous pouvez définir la source comme URL de chaîne. Le terme sera dans "terme" chaîne de requête. Et il fonctionne!!

0
panawat wongkleaw