Saisie semi-automatique "setup", jquery

Question

J'essaie d'obtenir le fonctionnement automatique avec une application simple que je construis. Voici mon code à ce jour:

 
gMeds = new Array(); 

$(document).ready(function(){ 
    var autoComp = setUpAutoComplete(); 
    if(autoComp) { 
     $("#med").autocomplete(gMeds); 
    } 
    else { 
     alert('Autocomplete unavailable'); 
    } 

}); 

function setUpAutoComplete() { 
    $.ajax({ 
     url: "ajax-getAllMeds.php", 
     async: false, 
     type: "GET", 
     dataType: "text", 
     success: function(result){ 
      gMeds = JSON.parse(result); 
      return true; 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
      return false; 
     } 
    }); 
} 

La source de "ajax-getAllMeds.php" produit JSON valide (tel que vérifié par http://www.jsonlint.com/).

Le produit est JSON

 
{ 
    "meds": [ 
     { 
      "name": "ace" 
     }, 
     { 
      "name": "danger" 
     } 
    ] 
} 

Ce que je suis en train d'accomplir tourne mon JSON dans un tableau javascript et en utilisant ce tableau comme base pour mon groupe de mots à « autocomplete de ». Suis-je loin? Je suis confronté à divers problèmes.

Answer 1

j'avais le même problème avec jquery autocomplete il y a quelques jours au point que je considérais l'aide de la saisie semi-automatique scriptaculous, mais il est avéré être beaucoup plus facile que je pensais en fait - un peu surpris à tous les cheveux tirant j'ai traversé :)

Comme il se trouve, c'est tout ce que vous avez besoin, sérieusement .. si vous rencontrez des problèmes me revenir et je vais essayer de travailler avec vous.

Préparez votre fichier .php. Dans mon cas, je l'ai appelé "list.php" Ma table s'appelle des listes et a des champs identifiant et nom. Je récupère le nom seulement. Ces noms sont ce qui va peupler les options sélectionnables.

Notez que ce que l'utilisateur tape dans la zone de saisie est passé à 'q'. C'est le $ _GET ['q'] que vous voyez à la ligne 2 du code ci-dessous. Vous pouvez remplacer/renommer si vous voulez, mais mieux ne pas déranger. Notez que cela n'a rien à voir avec le nom du champ de saisie lui-même. Notez également que la saisie semi-automatique de jquery a besoin de "\ n" pour séparer les résultats en options sélectionnables indépendamment les unes des autres. Si vous ne concaténéz pas "\ n", tous les résultats seront affichés comme une seule option sélectionnable.

//start with database connection of course 
$rs = mysql_query("SELECT * FROM lists WHERE name LIKE '%" . $_GET['q'] . "%'"); 


while($row = mysql_fetch_assoc($rs)) { 
    echo $row['name'] . "\n"; 
} 

Préparez votre champ de saisie. Dans mon cas, je l'ai appelé name = « myinputfield », mais ce n'est pas important parce que le nom n'a pas d'importance, il est l'id = « searchterm » qui importe

<input name="myinputfield" type="text" id="searchterm" size="30" maxlength="100" /> 

ensuite dans votre fichier .js, inclure les éléments suivants :

$("#searchterm").autocomplete("list.php"); 

J'ai fait quelques trucs supplémentaires avec le style etc parce que je ne suis pas heureux avec le style par défaut, mais c'est tout ce que vous devez obtenir le functionalirty aller. Les points les plus importants sont d'utiliser $ _GET ['q'] dans votre script et de cibler l'identifiant #searchterm dans votre js. Faites-moi savoir si cela résout votre problème.

Answer 2

La première chose que vous devriez essayer est la suivante:

gMeds = JSON.parse(result).meds; 

Vous devriez également déplacer le code dans la méthode de réussite.

$(document).ready(function(){ 
    setUpAutoComplete(); 
}); 

function setUpAutoComplete() { 
    $.ajax({ 
     url: "ajax-getAllMeds.php", 
     async: false, 
     type: "GET", 
     dataType: "text", 
     success: function(result){ 
      var json = JSON.parse(result); 
       if (!json || !json.meds) { 
        alert('invalid'); 
       } 
       $("#med").autocomplete(json.meds); 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      alert(textStatus); 
      return false; 
     } 
    }); 
}