Question

我正在尝试通过读取外部文件（即data.json）来编写jQuery UI自动完成。当我尝试从数组中读取代码时，代码工作正常，但如果我尝试从外部文件中读取它，它就不再起作用了！？！不知道为什么!!

这是我的代码：

http://plnkr.co/edit/LPqBGyocpswPrEzjb1Nq?p=preview

OR

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#autocomplete1" ).autocomplete(
            {
                source:"data.json",
                select: function( event, ui ) {
                    $( "#autocomplete1" ).val( ui.item.code + " - " + ui.item.label );
                    return false;
                }
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.code + " - " + item.label + "</a>" )
                    .appendTo( ul );
                };      

        });        
      </script>
   </head>

   <body>
      <input type="text" id="autocomplete1" size=40/>
   </body>
</html>

/ ************* ************* /

这是data.json文件：

{   
    {
        "code":"YOO",
        "label":"Oshawa",
        "country":"Canada",
    },
    {
        "code":"YOW",
        "label":"Ottawa Macdonald-Cartier International",
        "city":"Ottawa",
    },
    {
        "code":"YOH",
        "label":"Oxford House",
        "city":"Oxford House",
    } 
}

TKS

Answer 1

来自docs：

Source 键入：Array或String或Function（Object请求，Function响应（{ {3}}数据））

                                               Default: none; must be specified

必须指定要使用的数据。与您使用的变体无关，标签始终被视为文本。如果您希望将标签视为html，则可以使用Object。这些演示都集中在源选项的不同变体上 - 查找与您的用例匹配的变体，并查看代码。

支持多种类型：

数组：数组可用于本地数据。有两种支持的格式：
- 字符串数组：[ "Choice1", "Choice2" ]
- 具有label和value属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]
标签属性显示在建议菜单中。价值将在用户选择项目时插入到input元素中。如果只指定了一个属性，则它将用于两者，例如if 您只提供值属性，该值也将用作标签
字符串：使用字符串时，自动完成插件希望该字符串指向将返回JSON数据的URL资源。它可以在同一主机上或另一主机上（必须提供 JSONP ）。自动完成插件不会过滤结果，相反，一个查询字符串添加了一个术语字段，其中服务器端脚本应该用于过滤结果。例如，如果source选项设置为"http://example.com"和用户类型foo，将发出GET请求 http://example.com?term=foo。数据本身可以是相同的格式化为上述本地数据。
功能：第三种变体，即回调，提供最大的灵活性，可用于连接任何数据源   自动完成。回调有两个参数：
- 一个请求对象，具有单个术语属性，引用该对象当前在文本输入中的值。例如，如果用户输入在城市领域的“新哟”，自动完成术语将等于“新的” 球”。
- 一个响应回调，它需要一个参数：数据到建议用户。应根据此数据过滤此数据提供的术语，可以是上述任何格式用于简单的本地数据。提供自定义时很重要源回调以在请求期间处理错误。你必须即使遇到错误，也始终调用响应回调。这可确保窗口小部件始终具有正确的状态。
在本地过滤数据时，您可以使用内置$.ui.autocomplete.escapeRegex功能。这需要一个字符串参数和转义所有正则表达式字符，产生结果安全传递给new RegExp()。

您指定的是string。这里的关键点是：

自动完成插件不会过滤结果，而是添加一个带有术语字段的查询字符串，服务器端脚本应用于过滤结果。例如，如果source选项设置为"http://example.com"且用户键入foo，则会向http://example.com?term=foo发出GET请求。数据本身的格式与上述本地数据的格式相同。

该字符串用于指定要点击的url，它返回指定格式的数据。

jQueryui autocomplete不直接接受JSON，因此您的代码无效。您应该指定有效的数据源。

他们的插件，他们的规则：）

带有外部JSON文件的jQuery UI autoComplete

1 个答案: