Автозаполнение JQuery: использовать ключ и пометить локальный массив JS?Помогите! - PullRequest
Новая
       9

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

2 голосов
/ 08 ноября 2010

Я делаю простую веб-страницу 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, просто записывается в content div.Я хочу, чтобы определение термина было написано.Как мне установить это в JQuery, где я могу использовать функцию выбора автозаполнения, просто напишите определение, а не термин / метку?

Ответы [ 2 ]

0 голосов
/ 08 ноября 2010

Согласно В этом примере вы сможете добавить все необходимые свойства в массив данных источника и получить доступ к ним в событии 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...

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

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

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

0 голосов
/ 08 ноября 2010

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

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

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

...