JQuery Autocomplete: En utilisant une clé et l'étiquette tableau local JS? Aidez-moi!

Question

Je fais une page web simple, iPhone que les listes d'environ 200 termes médicaux et leurs définitions. J'utilise JQuery autocomplete pour permettre à l'utilisateur de rechercher dynamiquement les termes, et quand ils appuyez sur le terme, ils veulent que je veux afficher la définition du terme juste en dessous. Je besoin d'aide pour la mise en place d'un tableau JS à la fois le terme et la définition à la fois.

À l'heure actuelle, 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 de 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));
    }

En ce moment, tout cela fait est lorsque les robinets utilisateur sur le terme dans la liste déroulante, le terme lui-même qui est connu comme ui.item.label devient juste écrit dans le content div. Ce que je veux, c'est à écrire la définition du terme. Comment puis-je mettre cela dans JQuery où je peux avoir la fonction de sélection d'autocomplétion il suffit d'écrire la définition et non le terme / label?

Answer 1

Selon Cet exemple vous devriez être en mesure d'ajouter toutes les propriétés que vous voulez dans votre tableau de données source et être en mesure d'y accéder à 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...

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

$( "#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éer un autre tableau js séparé avec le terme que l'indice de chaîne, comme vous montrer. Appeler 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 faire.