JQuery 自动完成：使用键和标签本地 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。我想要的是写下该术语的定义。如何在 JQuery 中进行设置，让自动完成选择功能只需编写定义而不是术语/标签？

Answer 1

根据 This 示例，您应该能够在您的源数据数组并能够在选择事件上访问它们。

因此，您的源数据数组可能如下所示：

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。像您之前使用的那样标签。

Answer 2

创建另一个单独的 js 数组，并将术语作为字符串索引，如您所示。称其为定义之类的其他名称，而不是术语。然后，当您想要附加“内容”div 时，创建一个像这样的新内容

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

，这将调用术语的定义。然后像您刚才那样使用appendChild 函数。