Jquery自动完成演示不起作用

时间:2014-01-01 05:39:59

标签: javascript jquery autocomplete

大家好,感谢您花时间阅读这篇文章。 首先,请注意我是新手,所以如果我提出愚蠢的问题,或者我错过了一些非常明显的事情,请不要杀了我。

我想要注意的是,我已经搜索了论坛并在此处阅读了几个关于我的问题但没有成功的项目。

我的问题:我正在尝试实现最基本的jquery自动完成(http://www.jqueryautocomplete.com/jquery-autocomplete-json-example.html

我的代码:

<head>

<script src="js/jquery/jquery-1.7.1.min.js"></script>
<script src="js/jquery/jquery.ui.core.min.js"></script>
<script src="js/jquery/jquery.ui.widget.min.js"></script>
<script src="js/jquery/jquery.ui.position.min.js"></script>
<script src="js/jquery/jquery.ui.autocomplete.min.js"></script>
<link rel="stylesheet" href="js/jquery/smoothness/jquery-ui-1.8.16.custom.css"/>

</head>

<body>

<input type="text" id="search" />

</body>

<script>
var data = [
    {"label" : "Aragorn"},
    {"label" : "Arwen"},
    {"label" : "Bilbo Baggins"},
    {"label" : "Boromir"},
    {"label" : "Frodo Baggins"},
    {"label" : "Gandalf"},
    {"label" : "Gimli"},
    {"label" : "Gollum"},
    {"label" : "Legolas"},
    {"label" : "Meriadoc Merry Brandybuck"},
    {"label" : "Peregrin Pippin Took"},
    {"label" : "Samwise Gamgee"}
    ];
$(function() {
$( "#search" ).autocomplete(
{
     source:data
})
});
</script>

我尝试添加$(document).ready(function()没有任何成功。我错过了一些非常愚蠢的东西吗?

先谢谢你的帮助!非常感谢。

2 个答案:

答案 0 :(得分:0)

首先

下载这些文件

<script src="js/jquery/jquery-1.7.1.min.js"></script>
<script src="js/jquery/jquery.ui.core.min.js"></script>
<script src="js/jquery/jquery.ui.widget.min.js"></script>
<script src="js/jquery/jquery.ui.position.min.js"></script>
<script src="js/jquery/jquery.ui.autocomplete.min.js"></script> 

然后将其添加到项目的js文件夹中,它将起作用

答案 1 :(得分:0)

请检查控制台是否有任何错误。我相信您尚未在项目目录中添加所有js文件。一切似乎都在Fiddle中完美运行。请确保为所有js添加正确的脚本src

<强> Working Fiddle

$(function() {
 $( "#search" ).autocomplete(
 {
 source:data
 })
});