简单的 jquery UI 自动完成页面不起作用答案

【问题标题】：Simple jquery UI autocomplete page does not work简单的 jquery UI 自动完成页面不起作用
【发布时间】：2012-06-16 23:12:18
【问题描述】：

我是 jquery 编程的初学者：如果我的代码不好，我深表歉意。

我有一个简单的 html 文件

<!DOCTYPE html>
<html>
<head>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 <script>
$(document).ready(function() {
    var arr = [];
    var items = {};
    $.getJSON('testjson.json', function(data) {
        $.each(data, function(key, value){
            arr.push(value);
        });
        arr.join(',');
        items = {source: arr};
    });
    $("input#autocomplete").autocomplete(items);
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="Heading" >
<h2 align="center">Client Browser</h2>
</div>  
<input id="autocomplete" size="100" align="middle"/>

</body>
</html>

这是我的 testjson.json 文件：

{
"1":"One",
"2":"Two",
"3":"Three"
}

当我使用 Altova XML spy 运行 html 文件时，我得到了正确的输出。但是当我在浏览器中打开它（通过 XAMP 服务器运行）时，这就是我在 Firefox 控制台中得到的：

jquery-ui.min.js 第 5 行中的“this.source is not a function”

但是，如果我直接将 JS 对象传递给自动完成功能，它确实有效，例如，以下代码有效：

$("input#autocomplete").autocomplete({source:["One", "Two", "Three"]});

我无法理解问题出在哪里，因为项目包含相同的对象。我在这里做错了什么？

【问题讨论】：

一个问题是您的 json 请求将在未来的任意时间完成。

标签： jquery json jquery-ui autocomplete

【解决方案1】：

尝试移动这条线：

$("input#autocomplete").autocomplete(items);

进入您的 getJSON 回调。即

$.getJSON('testjson.json', function(data) {
    $.each(data, function(key, value){
        arr.push(value);
    });
    arr.join(',');
    items = {source: arr};
    $("input#autocomplete").autocomplete(items);
});

【讨论】：

【解决方案2】：

我认为问题在于您不是在成功的 Ajax 请求之后而是在执行请求的同时初始化自动完成。

您应该将相应的行放在成功处理程序中：

$.getJSON('testjson.json', function(data) {
    $.each(data, function(key, value){
        arr.push(value);
    });
    arr.join(',');               // BTW, this line doesn't make any sense
    items = {source: arr};

    $("input#autocomplete").autocomplete(items);   // <-- place here
});

【讨论】：

这对我来说似乎也是一个可能的问题。 +1