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的术语本身就会被写入content div。我想要的是写出术语的定义。我如何在JQuery中设置它，我可以使用自动完成选择功能只是编写定义而不是术语/标签？

Answer 1

使用术语作为字符串索引创建另一个单独的js数组，就像您显示的那样。称之为definitions，而不是terms。然后，当你想要附加“content”div时，创建一个像这样的新

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

这将称为术语的定义。然后像你刚才那样使用appendChild函数。

Answer 2

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

然后在您的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。

JQuery自动完成：使用密钥并标记本地JS数组？救命！

2 个答案: