geonames自動填充示例

我正在構建我的第一個真正的網站，我試圖實現一個字段，用戶可以選擇一個位置（使用自動完成來確保它們是正確的）。我遇到了這個完美的選擇http://jqueryui.com/demos/autocomplete/#remote-jsonp。我從來沒有使用JSON或jQuery，所以我試圖複製粘貼給定的代碼，看看它是如何工作的，看看它對我有好處，或者我需要做任何改變。但是，當我嘗試它自動完成不工作。我想我錯過的東西，當我在開始時引用jquery，但我不知道是什麼。我想答案是非常簡單，我誤解了，但如果任何人都可以幫助我，我會很grateful.This是我使用的代碼：geonames自動填充示例

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

來源

2012-08-12 yiannis

你將需要從本地域或從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-12 23:36:05

謝謝，這就是我一直在尋找！工作正常。 – yiannis 2012-08-13 22:40:56

geonames自動填充示例

回答

相關問題