2011-04-03 137 views
10

有人能告訴我爲什麼我的代碼爲jquery自動完成不工作?jquery自動完成不工作

這是我的javascript代碼。

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks", "Philadelphia Sixers", "New York Knicks", "Indiana Pacers", "Charlotte Bobcats", "Milwaukee Bucks", "Detroit Pistons", "New Jersey Nets", "Toronto Raptors", "Washington Wizards", "Cleveland Cavaliers"]; 
     $("#seed_one").autocomplete({ source: data }); 
    }); 
</script> 

這裏是我的html:

<input id="seed_one" type="text" name="seed_one"/><br /> <br /> 

感謝,

蘭斯

回答

19

警告:這是一個古老的答案,一個老問題約會回到2011年你應該 建議使用jQuery的較新版本,並檢查指導的API參考。

您遇到的問題是,你正在使用的jQuery Autocomplete plugin但你打電話了,你就會叫jQuery UI autocomplete的方式。

如果您使用jQuery UI Autocomplete,代碼本身可以正常工作,因爲您可以see in this fiddle。如果您使用的自動完成插件,你的號召變爲

$("#seed_one").autocomplete(data); 

建議:在jQuery UI的

  1. 使用自動完成,而不是自動完成插件。後者已棄用。
  2. 修復http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js,這不可能在這個時候訪問

完整代碼jQuery UI的

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks", "Philadelphia Sixers", "New York Knicks", "Indiana Pacers", "Charlotte Bobcats", "Milwaukee Bucks", "Detroit Pistons", "New Jersey Nets", "Toronto Raptors", "Washington Wizards", "Cleveland Cavaliers"]; 
      $("#seed_one").autocomplete({source:data}); 
     }); 
    </script> 
</head> 

<body> 
    <input id="seed_one" type="text" name="seed_one"/> 
</body> 
</html> 

爲自動完成插件完整代碼:

<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks", "Philadelphia Sixers", "New York Knicks", "Indiana Pacers", "Charlotte Bobcats", "Milwaukee Bucks", "Detroit Pistons", "New Jersey Nets", "Toronto Raptors", "Washington Wizards", "Cleveland Cavaliers"]; 
      $("#seed_one").autocomplete(data); 
     }); 
    </script> 
</head> 

<body> 
    <input id="seed_one" type="text" name="seed_one"/> 
</body> 
</html> 
+0

Hmmmm,它仍然無法工作....現在它變得非常令人沮喪 – Lance 2011-04-03 06:09:33

+0

Edi在FF 4上測試包括完整的代碼案例。 – 2011-04-03 06:16:40

+0

非常感謝。我有一種傾向,有些時候心不在焉,所以我可能錯過了一些微不足道的東西。 – Lance 2011-04-03 06:19:16

5

嘗試改變

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

$("#seed_one").autocomplete(data); 
-3
*** 

> for Mvc Artitecture you must delete already imbended 
> @Scripts.Render("~/bundles/Jquery") and 
> @Scripts.Render("~/bundles/Jquaryval") on all .cshtml files at the 
> end and for also views/Shared/_layout.cshtml at the end and put our 
> jaquery suitable files on his suitables .cshtmls files in head...and 
> lets enjoy. put on head..these files 
> 
> <link href="~/Content/jquery-ui-1.10.4.custom.min.css" 
> rel="stylesheet" type="text/css" /> <script 
> src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script> 
> <script src="~/Scripts/jquery-ui-1.10.4.custom.min.js" 
> type="text/javascript"></script> 

***