JQuery Autocompletar: El uso de una clave y la etiqueta de matriz local JS? ¡ayuda!

Question

Estoy haciendo una sencilla página web para el iPhone que las listas de alrededor de 200 términos médicos y sus definiciones. Estoy usando jQuery autocompletado para permitir al usuario buscar dinámicamente los términos, y cuando se toca el término que quieren que desee mostrar la definición del término justo debajo. Necesito ayuda para la creación de una matriz JS tanto con el término y la definición de una vez.

Actualmente, he una matriz cargada como tal:

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

Lo que yo preferiría sin embargo, es si sabía cómo cargar un término y su definición en una serie como esta:

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

De todos modos, al final de la lista de arreglo terms I activar el código de autocompletar como tal:

$( "#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 este momento todo esto hace es cuando los grifos de usuario en el término en la lista desplegable, el término en sí que se conoce como ui.item.label sólo se pone escriben en el div content. Lo que yo quiero es que la definición del término que se escribirá. ¿Cómo puedo configurar esto en jQuery donde puedo tener la función de selección de autocompletar simplemente escribir la definición y no el término / etiqueta?

Answer 1

De acuerdo con Este ejemplo que debe ser capaz de añadir todas las propiedades que se desear en la matriz de datos de origen y ser capaz de acceder a ellos en el evento select.

Así que la matriz de datos de origen podría tener este aspecto:

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...

y luego seleccione en su definición de evento hacer esto:

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

Así que la diferencia es que luego se puede utilizar en lugar de ui.item.desc ui.item.label que estabas usando antes.

Answer 2

Crea otra matriz js separado con el término como el índice de la cadena, como se muestra. Llamarlo de otra manera como definitions, no terms. Luego, cuando se desea añadir el div "contenido", crear un nuevo como esto

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

Y eso va a llamar a la definición de los términos. A continuación, utilizar la función appendChild como que estabas haciendo.