1

我正在构建我的第一个真实站点,除此之外,我正在尝试实现一个用户可以选择位置的字段(使用自动完成来确保它们是正确的)。我遇到了这个完美的选择http://jqueryui.com/demos/autocomplete/#remote-jsonp。我从未使用过 json 或 jquery,所以我尝试复制粘贴给定的代码以查看它是如何工作的,看看它是否对我有好处,或者我需要进行任何更改。但是当我尝试它时,自动完成不起作用。我想我在开始时引用 jquery 时错过了一些东西,但我不知道是什么。我想答案很简单,我误解了,但如果有人能帮忙我将不胜感激。这是我正在使用的代码:

    <!DOCTYPE html>
        <html lang="en">

        <head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Remote JSONP datasource</title>
    <link rel="stylesheet" href="jqueryui.com/themes/base/jquery.ui.all.css">
    <script src="jqueryui.com/jquery-1.7.2.js"></script>
    <script src="jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="jqueryui.com/ui/jquery.ui.position.js"></script>
    <script src="jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
    <link rel="stylesheet" href="jqueryui.com/demos/demos.css">

    <style>
    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
    #city { width: 25em; }
    </style>

    <script>
    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#city" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city" />
    Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div><!-- End demo -->



<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
</div><!-- End demo-description -->

</body>
</html>
4

1 回答 1

3

您将需要从本地域或 CDN 引用您的脚本文件(jQueryUI 不允许您从 HTML 页面下载它们的脚本引用)。为了让事情顺利进行,我建议使用 CDN 来加载 jQuery、jQueryUI 和主题。

因此,请尝试使用以下内容替换您的script标签(jQuery 和 jQueryUI 引用):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>

并将您的 CSS 引用 ( link rel='stylesheet') 替换为 CDN 上的主题:

<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css' />

从那里您可以自定义要在下载页面上使用的 jQueryUI 部分,并引用从您的应用程序构建的 JS 文件。

于 2012-08-12T23:36:05.943 回答