Saisie semi-automatique JQuery: à l'aide d'une clé et étiquette JS Array local? Aidez-moi!

Question

Je crée une page web iPhone simple qui répertorie environ 200 termes médicaux et leurs définitions. J'utilise la saisie semi-automatique JQuery pour permettre à l'utilisateur de rechercher dynamiquement les termes, et quand ils tapent le terme qu'ils veulent, je veux afficher la définition du terme juste en dessous. J'ai besoin d'aide pour configurer un tableau JS avec le terme et la définition à la fois.

Actuellement, j'ai un tableau chargé en tant que tel:

var terms = [ 
     "Abdomen", 
     "Ability", 
     "Abolish", 
etc... 

Ce que je préférerais est si je savais comment charger un terme et sa définition dans un tableau comme celui-ci:

terms['Abdomen'] = 'stomach, stomach area, belly, tummy'; 
terms['Ability'] = 'skill'; 
terms['Abolish'] = 'end, do away with, get rid of'; 

Quoi qu'il en soit, à la fin de la liste de tableau terms activer le code autocomplete en tant que tel:

$("#terms").autocomplete({ source: terms,}); 
    $("#terms").autocomplete({ minLength: 2 }); 
    $("#terms").autocomplete({ delay: 0 }); 
    $("#terms").autocomplete({ select: function(event, ui) 
    { 
     var myDiv1 = document.getElementById("content"); 
     myDiv1.appendChild(document.createTextNode(ui.item.label)); 
    } 

Maintenant tout cela est lorsque l'utilisateur tape sur le terme dans la liste déroulante, le terme lui-même qui est connu comme ui.item.label vient d'être écrit à la division content. Ce que je veux c'est que la définition du terme soit écrite. Comment puis-je configurer cela dans JQuery où je peux avoir la fonction de saisie semi-automatique simplement écrire la définition et non le terme/étiquette?

Answer 1

Selon l'exemple This, vous devriez pouvoir ajouter toutes les propriétés que vous voulez dans votre tableau de données source et pouvoir y accéder dans l'événement select.

Ainsi, votre tableau de données source pourrait ressembler à ceci:

var terms = [ 
    {label : "Abdomen", desc: "stomach, stomach area, belly, tummy"}, 
    {label : "Ability", desc: "skill"}, 
    {label : "Abolish", desc: "end, do away with, get rid of"} 
etc... 

puis dans la définition de votre événement select faire:

$("#terms").autocomplete({ select: function(event, ui) 
{ 
    var myDiv1 = document.getElementById("content"); 
    myDiv1.appendChild(document.createTextNode(ui.item.desc)); 
} 

Donc, la différence est que vous pouvez ensuite utiliser ui.item.desc au lieu de ui.item.label comme vous utilisiez avant.

Answer 2

Créez un autre tableau js distinct avec le terme comme index de chaîne, comme vous le montrez. Appelez-le quelque chose d'autre comme definitions, pas terms. Ensuite, lorsque vous voulez ajouter la div « contenu », créez un nouveau comme celui-ci

var newDefinition = definitions[ui.item.label]; 

Et qui appellera la définition des termes. Ensuite, utilisez la fonction appendChild comme vous venez de le faire.