Question

我是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间谍运行html文件时，我得到了正确的输出。但是当我在浏览器中打开它（通过XAMP服务器运行）时，这就是我在firefox控制台中获得的：

“this.source不是jquery-ui.min.js第5行中的函数”

但是，如果我直接将JS对象传递给自动完成函数，例如，以下代码可以正常工作：

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

由于项目包含相同的对象，我无法理解问题所在。我在这里做的不正确？

Answer 1

我认为问题是您在成功的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
});

Answer 2

尝试移动此行：

$("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);
});

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

2 个答案: