[OpenLayers-Commits] r11276 - sandbox/camptocamp/mobile/openlayers/examples

[commits-20090109 at openlayers.org]

Author: pgiraud
Date: 2011-02-23 01:19:45 -0800 (Wed, 23 Feb 2011)
New Revision: 11276

Modified:
   sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html
Log:
Geonames search, first round

Modified: sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html
===================================================================
--- sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html	2011-02-23 09:14:26 UTC (rev 11275)
+++ sandbox/camptocamp/mobile/openlayers/examples/mobile-jq.html	2011-02-23 09:19:45 UTC (rev 11276)
@@ -52,6 +52,11 @@
         </style>
         <script>
             $(document).ready(function() {
+                // Start with the map page
+                if (window.location.hash && window.location.hash!='#mappage') {
+                    $.mobile.changePage('mappage');
+                }
+
                 // fix height of content
                 function fixContentHeight() {
                     var footer = $("div[data-role='footer']:visible"),
@@ -80,6 +85,37 @@
                 $("#minus").click(function(){
                     map.zoomOut();
                 });
+
+                $('#query').keydown(function(e){
+                    if (e.which === 13) { // enter
+                        $.mobile.pageLoading();
+
+                        // Prevent form send
+                        e.preventDefault();
+
+                        $('#search_results').empty();
+
+                        var searchUrl = 'http://ws.geonames.org/searchJSON?featureClass=P&style=full&amp;&amp;maxRows=10';
+                        searchUrl += '&name_startsWith=' + $('#query')[0].value;
+                        $.getJSON(searchUrl, function(data) {
+                            $.each(data.geonames, function() {
+                                $('<li>')
+                                    .hide()
+                                    .append($('<h2 />', {
+                                        text: this.name
+                                    }))
+                                    .append($('<p />', {
+                                        html: '<b>' + this.countryName + '</b> ' + this.fcodeName
+                                    }))
+                                    .appendTo('#search_results')
+                                    .show();
+                            });
+                            $('#search_results').listview('refresh');
+                            $.mobile.pageLoading(true);
+                        });
+                    }
+
+                });
             });
 
         </script>
@@ -106,8 +142,15 @@
         </div>
         <div data-role="page" id="searchpage">
             <div data-role="header">
-                <h1>Search</h1>
+                 <h1>Search</h1>
+                    <div data-role="fieldcontain">
+                        <input type="text" name="query" id="query"
+                            value="" placeholder="Search for places"
+                            autocomplete="off"/>
+                    </div>
             </div>
+            <ul data-role="listview" data-inset="true" id="search_results"> 
+            </ul> 
         </div>
         <div data-role="page" id="layerspage">
             <div data-role="header">