JQuery Autocomplete: Использование ключа и метки локального массива JS? Помогите!

Question

Я делаю простую веб-страницу iPhone, в которой перечислены около 200 медицинских терминов и их определения. Я использую автозаполнение JQuery, чтобы позволить пользователю динамически искать условия, и когда они нажимают на термин, который они хотят, я хочу показать определение термина прямо ниже. Мне нужна помощь в настройке массива JS как с термином, так и с определением сразу.

В настоящее время, я массив загружен как таковой:

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

То, что я предпочел бы, однако, если бы я знал, как загрузить термин и его определение в массиве, как это:

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

во всяком случае, в конце списка terms массива я активировать код автозаполнения, как например:

$("#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)); 
    } 

Теперь все это происходит, когда пользователь набирает термин в выпадающем списке, сам термин, который известен как ui.item.label, просто записывается в div content. Я хочу, чтобы определение термина было написано. Как установить это в JQuery, где у меня может быть функция выбора автозаполнения, просто написать определение, а не термин/label?

Answer 1

В соответствии с примером This вы должны иметь возможность добавлять все свойства, которые вы хотите в свой массив исходных данных, и иметь доступ к ним в событии select.

Таким образом, ваш массив исходных данных может выглядеть следующим образом:

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

, а затем в вашем выборе определения событий сделать это:

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

Таким образом, разница в том, что вы можете использовать ui.item.desc вместо ui.item.label как раньше.

Answer 2

Создайте еще один отдельный массив js с термином как индекс строки, как вы показываете. Назовите это еще что-то вроде definitions, а не terms. Затем, когда вы хотите добавить в «содержание» DIV, создать новый, как этот

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

И будем называть определение термины. Затем используйте функцию appendChild, как вы делали.