Question

我正在构建我的第一个真实网站，其中包括我正在尝试实现一个用户可以选择位置的字段（使用自动完成确保它们是正确的）。我遇到了这个完美的选择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>

Answer 1

您需要从本地域或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文件。

geonames自动完成示例

1 个答案: