Question

我正在尝试创建一个使用本地json文件的jQuery自动完成小部件。

我的索引页面的代码如下： -

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
</head>
<body> 
  <p>
    <label>Address:</label>
    <input type='text' name='ward' value='' class='auto'>
  </p>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
    $(function() {
        //autocomplete
        $(".auto").autocomplete({
            source: data.json,
            minLength: 3,
            delay: 0,
        });             

    });
</script>
</body>
</html>

然后我有一个单独的文件，我称之为data.json，包含以下代码： -

[
    {"label":"Aragorn", "actor":"Viggo Mortensen"},
    {"label":"Arwen", "actor":"Liv Tyler"},
    {"label":"Bilbo Baggins", "actor":"Ian Holm"},
    {"label":"Boromir", "actor":"Sean Bean"},
    {"label":"Frodo Baggins", "actor":"Elijah Wood"},
    {"label":"Gandalf", "actor":"Ian McKellen"},
    {"label":"Gimli", "actor":"John Rhys-Davies"},
    {"label":"Gollum", "actor":"Andy Serkis"},
    {"label":"Legolas", "actor":"Orlando Bloom"},
    {"label":"Meriadoc Merry Brandybuck", "actor":"Dominic Monaghan"},
    {"label":"Peregrin Pippin Took", "actor":"Billy Boyd"},
    {"label":"Samwise Gamgee", "actor":"Sean Astin"}
];

当试图搜索标签时没有任何回报，这里有什么明显的错误吗？我查看了官方样本，但他们没有使用已经完整的本地json文件，所以不确定我是否错误地编写了源代码？

谢谢！

Answer 1

您没有设置数据

var data = [
{"label":"Aragorn", "actor":"Viggo Mortensen"},
{"label":"Arwen", "actor":"Liv Tyler"},
{"label":"Bilbo Baggins", "actor":"Ian Holm"},
{"label":"Boromir", "actor":"Sean Bean"},
{"label":"Frodo Baggins", "actor":"Elijah Wood"},
{"label":"Gandalf", "actor":"Ian McKellen"},
{"label":"Gimli", "actor":"John Rhys-Davies"},
{"label":"Gollum", "actor":"Andy Serkis"},
{"label":"Legolas", "actor":"Orlando Bloom"},
{"label":"Meriadoc Merry Brandybuck", "actor":"Dominic Monaghan"},
{"label":"Peregrin Pippin Took", "actor":"Billy Boyd"},
{"label":"Samwise Gamgee", "actor":"Sean Astin"}
];
$(function() {
    //autocomplete
    $(".auto").autocomplete({
        source: data,
        minLength: 3,
        delay: 0,
    });             

});

jQuery使用本地json文件自动完成？

1 个答案: