文章/答案/技术大牛

发布

问地理名称自动完成示例
EN

Stack Overflow用户

提问于 2012-08-13 07:25:52

回答 1查看 5.7K关注 0票数 1

我正在构建我的第一个真正的站点，在其他事情中，我正在尝试实现一个字段，用户可以在其中选择一个位置(使用自动完成来确保它们是正确的)。我偶然发现了这个完美的精选http://jqueryui.com/demos/autocomplete/#remote-jsonp。我从未使用过json或jquery，所以我尝试复制-粘贴给定的代码，看看它是如何工作的，看看它是否对我有好处，或者我需要做任何更改。但当我尝试时，自动补全不起作用。我猜我在开始引用jquery时遗漏了一些东西，但我不知道是什么。我想答案是我误解了一些非常简单的东西，但如果有人可以帮助我，我会是grateful.This是我正在使用的代码：

    <!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>

jquery

jquery-ui

autocomplete

geonames

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-08-13 07:36:06

您将需要引用来自本地域或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文件。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11926645

复制

相似问题

问地理名称自动完成示例
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问地理名称自动完成示例EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问地理名称自动完成示例
EN