2012-03-22 79 views
0

好的,我很简单地试图采取这个例子... http://jsfiddle.net/shanabus/HGF59/并把它放在我自己的服务器上的测试页面上玩。我有另一个jquery的代码,可以在另一个页面上正常工作,我在这里丢失了一些非常明显的东西吗?jquery语法错误

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 
<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    var areas = [{ 
     value: "area1", 
     label: "Area 1", 
     desc: "Area 1 extended description"}, 
    { 
     value: "sample2", 
     label: "Sample 2", 
     desc: "Sample of the second area"}, 
    { 
     value: "third-area", 
     label: "Third Area", 
     desc: "This is the third area"}]; 

    var projects = [{ 
     value: "jquery", 
     label: "jQuery", 
     desc: "the write less, do more, JavaScript library", 
     id: 1 
    }, { 
     value: "jquery-ui", 
     label: "jQuery UI", 
     desc: "the official user interface library for jQuery", 
     id: 2 
    }, { 
     value: "sizzlejs", 
     label: "Sizzle JS", 
     desc: "a pure-JavaScript CSS selector engine", 
     id: 3 
    }]; 

    $("#areas").autocomplete({ 
     minLength: 0, 
     source: areas, 
     select: function(event, ui) { 
      $("#areas").val(ui.item.label); 
      $("#project-div").show(); 
      return false; 
     } 
    }).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul); 
    }; 

    $("#project").autocomplete({ 
     minLength: 0, 
     source: projects, 
     focus: function(event, ui) { 
      $("#project").val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $("#project").val(ui.item.label); 
      $("#project-id").val(ui.item.id); 
      $("#project-description").html(ui.item.desc); 
      alert("I could submit form with id " + ui.item.id); 
      return false; 
     } 
    }).data("autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul); 
    }; 
}); 


    </script> 


</head> 

<body> 



<div class="demo">  
    <label>Choose area:</label>  
    <input id="areas" /> 
    <br /> 
     <div id="project-div" style="display: none;"> 
    <label>Choose project:</label> 
    <input id="project" />  
    <input type="hidden" id="project-id" />  
    <p id="project-description"></p> 
     </div> 
</div> 
</body> 
</html> 

该页面名为test.html,它位于与jquery-1.7.1.js相同的文件夹中。谢谢!

+0

你能告诉我们问题究竟是什么吗? – Archer 2012-03-22 13:55:11

+0

控制台不显示任何语法错误,那么实际的问题是什么?无论如何,这段代码应该做什么?需要更多信息。 – 2012-03-22 13:55:40

+0

http://jsfiddle.net/HGF59/1/工作正常。 – Blazemonger 2012-03-22 13:55:52

回答

0

上面的代码包含jQuery-UI样式表的链接,但不包括jQuery-UI JavaScript的链接。 (当你在它,为什么不链接到谷歌代码版本呢?其他人都一样。)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- this goes first --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- this goes next --> 
+0

这工作,但为什么没有这个参考工作? 它包含在同一个目录中吗?谢谢! – 2012-03-22 15:12:39

+0

问题不在于你如何链接到jQuery;问题在于你之后没有链接到jQuery-UI。他们是两个单独的文件。 – Blazemonger 2012-03-22 17:37:38

0

似乎一切都OK了这里.. 确保您的jQuery UI的脚本包括在内,是下jQuery.js

+0

我在标题中使用了,它正确地指向了我驻留在同一文件夹中的版本。 – 2012-03-22 15:10:46

+0

包含jQuery UI吗? – 2012-03-23 10:04:43