jQuery UI 自动完成 - 外部 javascript 数据源的语法？答案

【问题标题】：jQuery UI autocomplete - syntax for external javascript data source?jQuery UI 自动完成 - 外部 javascript 数据源的语法？
【发布时间】：2011-10-18 03:13:38
【问题描述】：

提前感谢您的阅读。我正在尝试自定义 jQuery UI 自动完成搜索以显示可点击链接的结果，并且我已经成功了。我已经成功地模仿了这个论坛上另一个问题的代码。

但是，我最终将有太多链接作为变量存储在页面上。我曾经使用旧版本的 jQuery 自动完成功能（在它成为 jQuery UI 之前）并且能够将变量“updates”存储在一个 javascript 文件中。使用 UI 中的新版本，我不知道该怎么做。旧版本在这里...

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

那里使用的javascript文件是“localdata.js”

有谁知道如何将源从同一 HTML 页面上的变量更改为与我在 jQuery UI 版本中的变量具有完全相同文本的外部 javascript 文件？

我也在这里尝试过迁移指南； http://www.learningjquery.com/2010/06/autocomplete-migration-guide 但我无法弄清楚。

我拥有的不引用外部文件的工作代码如下...

================================================ =====

    <script>
    $(function() {


    var updates = [ 

    { value: "http://www.google.com", label: "Google"},
    { value: "http://www.yahoo.com", label: "Yahoo!"},
    ];

    $("input#autocomplete").autocomplete({
    source: updates,
    select: function( event, ui ) { 
    window.location.href = ui.item.value;
    }
    });
    });
    </script>

======================================

我知道更改位于“source;updates”行，但我不知道该怎么做。再次非常感谢您的阅读。

【问题讨论】：

我有完全相同的数组“var updates = [....”，就像它在原始 HTML 文件上一样。我说来源是“source:array.js”，但似乎 jQuery UI 需要一些格式或查询和 PHP 响应？？？？为什么？！演示的文档记录很差。所有这些都在 JAVASCRITPT 中 - 它怎么不知道如何处理它？

标签： javascript jquery-ui-autocomplete

【解决方案1】：

实现它的一种方法是将数据以 JSON 格式存储在单独的文件中。以您的示例为例，您可以将更新数组转换为有效的 JSON：

[{"value": "http://www.google.com", "label": "Google"},
 {"value": "http://www.yahoo.com", "label": "Yahoo!"}]

（请注意键和值的双引号，不需要变量），然后将其保存在 updates.json 文件中。通过此设置，您可以在自动完成中将 source 设置为 updates.json：

$("input#autocomplete").autocomplete({
  source: "updates.json",
  select: function( event, ui ) { 
    window.location.href = ui.item.value;
  }
});

这假设您将从同一个域提供文件（自动完成功能还支持通过 JSONP 从远程域调用）。

【讨论】：