Question

好的，我只是想尝试这个例子...... http://jsfiddle.net/shanabus/HGF59/并将它放在我自己服务器上的测试页面上玩。我有另一个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位于同一文件夹中。谢谢！

Answer 1

上面的代码包含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 -->

Answer 2

这里好像一切都好...... 确保包含jQuery UI脚本并位于jQuery.js

下

Jquery语法错误

2 个答案: