Login page geonames plugin integration

component.json

@@ -24,6 +24,6 @@
     "js-fixtures": "https://github.com/badunk/js-fixtures/archive/master.zip",
     "bootstrap-multiselect": "https://github.com/davidstutz/bootstrap-multiselect.git",
     "zxcvbn" : "https://github.com/lowe/zxcvbn.git",
-    "geonames-server-jquery-plugin" : "~0.1.0"
+    "geonames-server-jquery-plugin" : "~0.2.0"
   }
 }

lib/conf.d/minifyGroupsConfig.php

@@ -13,6 +13,7 @@ $groups = array(
         '//assets/normalize-css/normalize.css',
         '//skins/build/login.css',
         '//assets/font-awesome/css/font-awesome.css',
+        '//assets/jquery.ui/themes/base/jquery.ui.autocomplete.css'
     ),
     'authentication' => array(
         '//assets/modernizr/modernizr.js',

templates/web/account/access.html.twig

@@ -6,7 +6,7 @@
 
 {% set selected = "access" %}
 
-{% block content %}
+{% block content_account %}
     <form name="updatingDemand" id="updatingDemand" action="{{ path("submit_update_account") }}" method="post">
         <table style="table-layout: fixed; width:100%">
             <tr>

templates/web/account/account.html.twig

@@ -4,12 +4,47 @@
 
 {% set selected = "informations" %}
 
-{% block head %}
+{% block stylesheet %}
+    {{ parent() }}
     <link rel="stylesheet" type="text/css" href="{{ path('minifier', { 'f' : 'skins/geonames/geonames.css' }) }}">
-    <script type="text/javascript" src="{{ path('minifier', { 'f' : 'skins/geonames/geonames.js' }) }}"></script>
+{% endblock %}
 
+{% block javascript %}
+    {{ parent() }}
+    <script type="text/javascript" language="javascript" src="{{ path('minifier', { 'f' : '/skins/account/account.js,assets/geonames-server-jquery-plugin/jquery.geonames.js' }) }}"></script>
     <script type="text/javascript">
-        initialize_geoname_field($("#form_geonameid"));
+        $(document).ready(function() {
+            var geocompleter = $("#form_geonameid").geocompleter({
+                "server": "{{ app['phraseanet.registry'].get('GV_i18n_service') }}",
+                "limit": 40
+            });
+
+            geocompleter.data("geocompleter").getAutocompleter().addClass("input-xlarge");
+
+            // On focus add select-state
+            geocompleter.geocompleter("autocompleter", "on", "autocompletefocus", function(event, ui) {
+                $("li", $(event.originalEvent.target)).closest("li").removeClass("selected");
+                $("a.ui-state-active, a.ui-state-hover, a.ui-state-focus", $(event.originalEvent.target)).closest("li").addClass("selected");
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "autocompletesearch", function(event, ui) {
+                $(this).addClass('input-loading');
+                $(this).removeClass('input-error');
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "autocompleteresponse", function(event, ui) {
+                $(this).removeClass('input-loading');
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "autocompleteclose", function(event, ui) {
+                $(this).removeClass('input-loading');
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "geotocompleter.request.error", function(jqXhr, status, error) {
+                $(this).removeClass('input-loading');
+                $(this).addClass('input-error');
+            });
+        });
     </script>
 {% endblock %}
 
@@ -17,7 +52,7 @@
     {% trans "login:: Mon compte" %}
 {% endblock %}
 
-{% block content %}
+{% block content_account %}
     <div class="row-fluid">
         <div class="span12">
             {{ auth_macro.flashes() }}
@@ -94,7 +129,7 @@
                         <div class="control-group">
                             <label class="form_label control-label" for="form_city"><strong>{% trans "admin::compte-utilisateur ville" %}</strong></label>
                             <div class="controls">
-                                <input class="input_element input-xlarge geoname_field" type="text" name="form_geonameid" id="form_geonameid" value="{{ app["authentication"].getUser().get_geonameid() }}" />
+                                <input class="input_element input-xlarge geoname_field" type="text" name="form_geonameid" id="form_geonameid" value="" />
                                 <p class="form_alert help-block"></p>
                             </div>
                         </div>

templates/web/account/authorized_apps.html.twig

@@ -6,7 +6,7 @@
 
 {% set selected = "applications" %}
 
-{% block content %}
+{% block content_account %}
     <div class="row-fluid">
         <div class="span6">
             <div id="content-apps">

templates/web/account/base.html.twig

@@ -1,12 +1,16 @@
- <html lang="{{ app["locale.I18n"] }}">
-    <head>
-        <title>{{ app["phraseanet.registry"].get("GV_homeTitle") }} {% block title %}{% endblock %}</title>
-        <link rel="stylesheet" type="text/css" href="{{ path('minifier', { 'f' : 'skins/build/account.css' }) }}"/>
-        <script type="text/javascript" language="javascript" src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js,/build/bootstrap/js/bootstrap.js.js,/skins/account/account.js' }) }}"></script>
-        {% block head %}{% endblock %}
-    </head>
+{% set jquery_theme = 'dark-hive' %}
 
-    <body>
+{% extends "common/index_bootstrap.html.twig" %}
+
+{% block stylesheet %}
+    <link rel="stylesheet" type="text/css" href="{{ path('minifier', { 'f' : 'skins/build/account.css' }) }}"/>
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript" language="javascript" src="{{ path('minifier', { 'f' : '/skins/account/account.js' }) }}"></script>
+{% endblock %}
+
+{% block content %}
      <div class="container">
             <div class="row-fluid">
                 <div class="span12">
@@ -29,7 +33,7 @@
             <div class="row-fluid">
                 <div class="span12">
                     <div class="content">
-                        {% block content %}{% endblock %}
+                        {% block content_account %}{% endblock %}
                     </div>
                 </div>
             </div>
@@ -42,5 +46,4 @@
             </div>
         </div>
         {% block scripts %}{% endblock %}
-    </body>
-</html>
+{% endblock %}

templates/web/account/reset-email.html.twig

@@ -12,7 +12,7 @@
 
 {% set selected  = "" %}
 
-{% block content %}
+{% block content_account %}
     <div class="row-fluid">
         <div class="span12">
             {{ auth_macro.flashes() }}

templates/web/account/sessions.html.twig

@@ -6,7 +6,7 @@
 
 {% set selected = "sessions" %}
 
-{% block content %}
+{% block content_account %}
     <div class="row-fluid">
         <div class="span12">
             <table class="table table-striped">

templates/web/admin/editusers.html.twig

@@ -1,5 +1,4 @@
 {% macro format_checkbox(admin, right, name, users, type) %}
-
     {% set id = right['base_id'] %}
     {% set class = 'base_id' %}
     {% if type == 'sbas' %}
@@ -30,7 +29,7 @@
       <div class="no_switch">
       </div>
     {% else %}
-      <div style="display:{{display}};" class="{{class}} switch_right {{sbas_class}} {{type}} {{type}}_{{id}} right_{{name}}">
+      <div style="display:{{display}}" class="{{class}} switch_right {{sbas_class}} {{type}} {{type}}_{{id}} right_{{name}}">
         <input class="{{class}}" name="{{name}}_{{id}}" value="" type="hidden"/>
        </div>
     {% endif %}
@@ -42,7 +41,7 @@
       <div class="no_switch">
       </div>
     {% else %}
-      <div style="display:{{display}};" class="{{class}} switch_right {{sbas_class}} {{type}} {{type}}_{{id}} right_{{name}}">
+      <div style="display:{{display}}" class="{{class}} switch_right {{sbas_class}} {{type}} {{type}}_{{id}} right_{{name}}">
         <input class="{{class}}" name="{{name}}_{{id}}" value="" type="hidden"/>
        </div>
     {% endif %}
@@ -91,14 +90,8 @@
     z-index:1500;
   }
 </style>
-<script type="text/javascript">
-  $(document).ready(function(){
-    ini_edit_usrs();
-    $('div.tabs').tabs();
-  });
-</script>
-<div>
 
+<div>
   <div class="tabs PNB" style="bottom:40px;">
     <ul>
       <li>
@@ -570,7 +563,42 @@
   </div>
 </div>
 
-<script type='text/javascript'>
+<script type="text/javascript" language="javascript" src="{{ path('minifier', { 'f' : 'assets/geonames-server-jquery-plugin/jquery.geonames.js' }) }}"></script>
+<script type="text/javascript">
+  $(document).ready(function(){
+    ini_edit_usrs();
+
+    var geocompleter = $('#user_infos_tab input.geoname_field').geocompleter({
+        "server": "{{ app['phraseanet.registry'].get('GV_i18n_service') }}",
+        "limit": 40
+    });
+
+    // On focus add select-state
+    geocompleter.geocompleter("autocompleter", "on", "autocompletefocus", function(event, ui) {
+        $("li", $(event.originalEvent.target)).closest("li").removeClass("selected");
+        $("a.ui-state-active, a.ui-state-hover, a.ui-state-focus", $(event.originalEvent.target)).closest("li").addClass("selected");
+    });
+
+    geocompleter.geocompleter("autocompleter", "on", "autocompletesearch", function(event, ui) {
+        $(this).addClass('input-loading');
+        $(this).removeClass('input-error');
+    });
+
+    geocompleter.geocompleter("autocompleter", "on", "autocompleteresponse", function(event, ui) {
+        $(this).removeClass('input-loading');
+    });
+
+    geocompleter.geocompleter("autocompleter", "on", "autocompleteclose", function(event, ui) {
+        $(this).removeClass('input-loading');
+    });
+
+    geocompleter.geocompleter("autocompleter", "on", "geotocompleter.request.error", function(jqXhr, status, error) {
+        $(this).removeClass('input-loading');
+        $(this).addClass('input-error');
+    });
+
+    $('div.tabs').tabs();
+
     $('#users_rights_form button#reset_rights').bind('click', function(){
         if(confirm("{% trans'are you sure you want reset rights ?' %}"))
         {
@@ -584,11 +612,8 @@ $('#users_rights_form button#reset_rights').bind('click', function(){
               users : users
             },
             success: function(data){
-
-          if(!data.error)
-          {
-            if(users === '')
-            {
+              if(!data.error) {
+                if(users === '') {
                   return false;
                 }
 
@@ -606,14 +631,12 @@ $('#users_rights_form button#reset_rights').bind('click', function(){
                 });
 
                 return false;
-          }
-          else
-          {
+              } else {
                 alert(data.message);
               }
             }
           });
         }
       });
-
+    });
 </script>

templates/web/common/dialog_export.html.twig

@@ -613,7 +613,28 @@
                 dialog.Close();
             });
 
-            initialize_geoname_field($('#command_geoname_field'));
+            var geocompleter = $('#command_geoname_field').geocompleter({
+                "server": "{{ app['phraseanet.registry'].get('GV_i18n_service') }}",
+                "limit": 40
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "autocompletesearch", function(event, ui) {
+                $(this).addClass('input-loading');
+                $(this).removeClass('input-error');
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "autocompleteresponse", function(event, ui) {
+                $(this).removeClass('input-loading');
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "autocompleteclose", function(event, ui) {
+                $(this).removeClass('input-loading');
+            });
+
+            geocompleter.geocompleter("autocompleter", "on", "geotocompleter.request.error", function(jqXhr, status, error) {
+                $(this).removeClass('input-loading');
+                $(this).addClass('input-error');
+            });
 
             $('#download .download_button').bind('click',function(){
                 if(!check_subdefs($('#download')))

templates/web/developers/application.html.twig

@@ -6,7 +6,7 @@
 
 {% set selected = "" %}
 
-{% block content %}
+{% block content_account %}
     <div class="row-fluid">
         <div class="span12">
             <h1>{% trans "Application" %}</h1>

templates/web/developers/application_form.html.twig

@@ -44,7 +44,7 @@
     {% endif %}
 {% endmacro %}
 
-{% block content %}
+{% block content_account %}
 <form id="form_create" action="{{ path("submit_developers_application") }}" method="POST" class="form-horizontal">
     {% if form is none %}
       {% set name, description, website, callback = "", "", "", ""%}

templates/web/developers/applications.html.twig

@@ -6,7 +6,7 @@
 
 {% set selected = "developer" %}
 
-{% block content %}
+{% block content_account %}
     <div class="row-fluid">
         <div class="span7">
             <div id="content-apps">

templates/web/login/register-classic.html.twig

@@ -30,6 +30,7 @@
                      name="registerForm"
                      method="POST"
                      action="{{ path("login_register_classic") }}"
+                     data-geonames-server-adress="{{ app['phraseanet.registry'].get('GV_i18n_service') }}"
                 >
                     {% if form.vars.errors|length > 0 %}
                         <div class="row-fluid">

templates/web/prod/User/Add.html.twig

@@ -60,14 +60,45 @@
         </table>
     </form>
 </div>
+a
+<script type="text/javascript" language="javascript" src="{{ path('minifier', { 'f' : 'assets/geonames-server-jquery-plugin/jquery.geonames.js' }) }}"></script>
 <script type="text/javascript">
     $(document).ready(function() {
+        var geocompleter = $('#QuickAddUser input.geoname_field').geocompleter({
+            "server": "{{ app['phraseanet.registry'].get('GV_i18n_service') }}",
+            "limit": 40
+        });
+
+        // On focus add select-state
+        geocompleter.geocompleter("autocompleter", "on", "autocompletefocus", function(event, ui) {
+            $("li", $(event.originalEvent.target)).closest("li").removeClass("selected");
+            $("a.ui-state-active, a.ui-state-hover, a.ui-state-focus", $(event.originalEvent.target)).closest("li").addClass("selected");
+        });
+
+        geocompleter.geocompleter("autocompleter", "on", "autocompletesearch", function(event, ui) {
+            $(this).addClass('input-loading');
+            $(this).removeClass('input-error');
+        });
+
+        geocompleter.geocompleter("autocompleter", "on", "autocompleteresponse", function(event, ui) {
+            $(this).removeClass('input-loading');
+        });
+
+        geocompleter.geocompleter("autocompleter", "on", "autocompleteclose", function(event, ui) {
+            $(this).removeClass('input-loading');
+        });
+
+        geocompleter.geocompleter("autocompleter", "on", "geotocompleter.request.error", function(jqXhr, status, error) {
+            $(this).removeClass('input-loading');
+            $(this).addClass('input-error');
+        });
 
         $("#QuickAddUser button").button();
 
         $("#QuickAddUser form").bind('submit', function() {
             return false;
         });
+
         $("#QuickAddUser form button.cancel").bind('click', function() {
             var dialog = $(this).closest('.ui-dialog-content');
             if (dialog.data("ui-dialog")) {
@@ -78,8 +109,8 @@
 
             return false;
         });
-    $("#QuickAddUser form button.valid").bind('click', function(){
 
+        $("#QuickAddUser form button.valid").bind('click', function() {
             var $form = $(this).closest('form');
             var $this = $(this);
 
@@ -94,10 +125,5 @@
 
             return false;
         });
-
-
-
-
-
     });
     </script>

www/scripts/apps/login/home/config.js

@@ -17,13 +17,18 @@ require.config({
         backbone: "../assets/backbone-amd/backbone",
         i18n: "../assets/i18next/release/i18next.amd-1.6.2.min",
         bootstrap: "../skins/build/bootstrap/js/bootstrap.min",
-        multiselect: "../assets/bootstrap-multiselect/js/bootstrap-multiselect"
+        multiselect: "../assets/bootstrap-multiselect/js/bootstrap-multiselect",
+        "jquery.geocompleter": "../assets/geonames-server-jquery-plugin/jquery.geonames"
     },
     shim: {
         bootstrap : ["jquery"],
         jqueryui: {
             deps: ["jquery"]
         },
+        "jquery.geocompleter" : {
+            deps: ['jquery'],
+            exports: 'jQuery.fn.geocompleter'
+        },
         multiselect: {
             deps: ["jquery", "bootstrap"]
         }

www/scripts/apps/login/home/register.js

@@ -12,7 +12,9 @@ require([
     "jquery",
     "i18n",
     "apps/login/home/common",
-    "common/forms/views/formType/passwordSetter"
+    "common/forms/views/formType/passwordSetter",
+    "jqueryui",
+    "jquery.geocompleter"
 ], function($, i18n, Common, RegisterForm) {
     var fieldsConfiguration = [];
 
@@ -80,10 +82,57 @@ require([
                 }
             });
 
+            var $form = $("form[name=registerForm]");
+
             new RegisterForm({
-                el : $("form[name=registerForm]"),
+                el : $form,
                 rules: rules
             });
+
+            var geocompleter = $("#geonameid").geocompleter({
+                "server": $form.data("geonames-server-adress"),
+                "limit": 40
+            });
+
+            // Positioning menu below input
+            geocompleter.geocompleter("autocompleter", "option", "position", {
+                "of": geocompleter.closest(".input-table"),
+                "my": "left top",
+                "at": "left bottom"
+            });
+
+            // On focus add select-state
+            geocompleter.geocompleter("autocompleter", "on", "autocompletefocus", function(event, ui) {
+                $("li", $(event.originalEvent.target)).closest("li").removeClass("selected");
+                $("a.ui-state-active, a.ui-state-hover, a.ui-state-focus", $(event.originalEvent.target)).closest("li").addClass("selected");
+            });
+
+            // On search request add loading-state
+            geocompleter.geocompleter("autocompleter", "on", "autocompletesearch", function(event, ui) {
+                $(this).addClass('input-loading');
+                $(this).removeClass('input-error');
+            });
+
+            // On open menu calculate max-width
+            geocompleter.geocompleter("autocompleter", "on", "autocompleteopen", function(event, ui) {
+                $(this).autocomplete("widget").css("min-width", geocompleter.closest(".input-table").outerWidth());
+            });
+
+            // On response remove loading-state
+            geocompleter.geocompleter("autocompleter", "on", "autocompleteresponse", function(event, ui) {
+                $(this).removeClass('input-loading');
+            });
+
+            // On close menu remove loading-state
+            geocompleter.geocompleter("autocompleter", "on", "autocompleteclose", function(event, ui) {
+                $(this).removeClass('input-loading');
+            });
+
+            // On request error add error-state
+            geocompleter.geocompleter("autocompleter", "on", "geotocompleter.request.error", function(jqXhr, status, error) {
+                $(this).removeClass('input-loading');
+                $(this).addClass('input-error');
+            });
         });
     });
 });

www/skins/admin/editusers.js

@@ -1,7 +1,4 @@
 function ini_edit_usrs(){
-
-  initialize_geoname_field($('#user_infos_tab input.geoname_field'));
-
   $('.users_col.options').bind('click', function(event){
     $('#users_check_uncheck').remove();
     event.stopPropagation();

www/skins/geonames/geonames.css

@@ -1,21 +1,52 @@
 
-.geoname_city_finder div.box{
-    cursor:pointer;
-    text-align:left;
-    padding:3px	;
-    color:white;
+.geocompleter-menu {
+    max-height: 180px;
+    overflow: auto;
+    background: #666;
+     box-shadow: 0 0 15px rgba(0, 0, 0, 1);
+    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 1);
+    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 1);
+    list-style-type: none;
 }
 
-.geoname_city_finder div.boxI{
-    background-color:#666666;
-    border:1px solid #666666;
+.geocompleter-menu li.ui-menu-item.selected {
+    border: 2px solid #46a546;
 }
 
-.geoname_city_finder div.boxP{
-    background-color:#444444;
-    border:1px solid #444444;
+.geocompleter-menu .ui-menu-item a {
+    color: #fff;
 }
 
-.geoname_city_finder div.box.selected{
-    border:1px solid red;
+.geocompleter-menu .ui-menu-item a.ui-state-focus,
+.geocompleter-menu .ui-menu-item a.ui-state-hover,
+.geocompleter-menu .ui-menu-item a.ui-state-active {
+    text-decoration: none;
+    background: none;
+    border:none;
+}
+
+.geocompleter-menu .ui-menu-item {
+     padding: 5px 10px;
+}
+
+.geocompleter-menu .ui-menu-item:nth-child(odd) {
+     background: #444444;
+}
+
+.geocompleter-menu .region {
+    font-size:  11px;
+    font-style: italic;
+    display: block;
+}
+
+.geocompleter-menu .highlight {
+    background: #46a546;
+}
+
+.geocompleter-input.input-loading {
+    background: url('/skins/icons/loaderFFF.gif') center right no-repeat;
+}
+
+.geocompleter-input.input-error {
+    color: red !important;
 }

www/skins/geonames/geonames.js

@@ -1,193 +0,0 @@
-
-var ajaxGeoRunning = false;
-var ajaxGeo = false;
-
-function initialize_geoname_field(box)
-{
-    $(box).bind('keyup', function(event) {
-        checkCity(event, $(this));
-        return false;
-    }).bind('keydown', function(event) {
-        goCity(event, $(this));
-    }).bind('focus', function(event) {
-        checkCity(event, $(this));
-        return false;
-    }) .bind('blur', function() {
-        var city_finder = $(this).parent().find('.geoname_city_finder');
-        if ($('div.box.selected', city_finder).length > 0)
-        {
-            selectCity($(this));
-        }
-        else
-        {
-            if ($('div.box', city_finder).length > 0)
-            {
-                $(this).val('');
-            }
-            $(this).parent().find('.geoname_city_finder').empty();
-        }
-
-        if (ajaxGeoRunning) {
-            ajaxGeo.abort();
-        }
-
-        ajaxGeoRunning = false;
-
-        return false;
-    });
-
-    $(box).attr('autocomplete', 'off').addClass('geoname_initialized');
-
-    var form_name = $(box).attr('name');
-
-    $(box).attr('name', form_name + '_geoname_name');
-
-    $('<div class="geoname_city_finder" style="width:200px;max-height:200px;overflow-y:auto;z-index:99999;"></div>').insertAfter($(box));
-    $('<input type="hidden" name="' + form_name + '" value="' + $(box).attr('geonameid') + '"/>').insertAfter($(box));
-
-    var city_finder = $(box).parent().find('.geoname_city_finder');
-}
-
-function checkCity(event, keybox)
-{
-    var geoname_id = $(keybox).next().val();
-
-    var city_finder = $(keybox).parent().find('.geoname_city_finder');
-
-    var badCodes = [9, 16, 17, 18, 20, 27, 33, 34, 35, 36, 37, 39, 45, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123];
-
-    if ($.inArray(event.keyCode, badCodes) >= 0)
-        return false;
-
-    if (event.keyCode == 40)
-    {
-        var el = $('div.box.selected', city_finder);
-
-        el.removeClass('selected');
-
-        if (el.next(':not(.unselectable)').length == 0)
-            el = $('div.box:not(.unselectable):first', city_finder);
-        else
-
-        el = el.next(':not(.unselectable)');
-        el.addClass('selected');
-
-        city_finder.scrollTop(city_finder.scrollTop() + $(el).position().top - ((city_finder.height() - $(el).outerHeight()) / 2));
-
-        return false;
-    }
-    else
-    {
-
-        if (event.keyCode == 38)
-        {
-            el = $('div.box.selected', city_finder);
-            el.removeClass('selected');
-            if (el.prev(':not(.unselectable)').length == 0)
-                el = $('div.box:not(.unselectable):last', city_finder);
-            else
-                el = el.prev(':not(.unselectable)');
-            el.addClass('selected');
-            city_finder.scrollTop(city_finder.scrollTop() + $(el).position().top - ((city_finder.height() - $(el).outerHeight()) / 2));
-            return false;
-        }
-        else
-        {
-            if (event.keyCode == 13)
-            {
-                event.preventDefault();
-                return false;
-            }
-            else
-            {
-                $('div.box.selected', city_finder).removeClass('selected');
-            }
-        }
-    }
-
-    if ($.trim($(keybox).val()) == '')
-    {
-        $(keybox).next().val('');
-        return;
-    }
-
-    ajaxGeo = $.ajax({
-        type: "POST",
-        url: "/include/geonames.feedback.php",
-        dataType: 'html',
-        data: {
-            action: "FIND",
-            city: $(keybox).val()
-        },
-        beforeSend: function() {
-            if (ajaxGeoRunning)
-                ajaxGeo.abort();
-            ajaxGeoRunning = true;
-            city_finder.css({
-                top: ($(keybox).position().top + $(keybox).outerHeight()),
-                left: $(keybox).position().left
-            })
-            city_finder.empty().append('<div class="box boxI unselectable" style="font-style;italic">Running</div>');
-        },
-        success: function(data) {
-            ajaxGeoRunning = false;
-            city_finder.empty().append(data);
-            if (geoname_id != '')
-                $('div:not(.unselectable):first', city_finder).addClass('selected');
-            else
-            {
-                var geo_el = $('#geo_' + geoname_id);
-                if (geo_el.length > 0)
-                {
-                    geo_el.addClass('selected');
-                    city_finder.scrollTop(city_finder.scrollTop() + geo_el.position().top - ((city_finder.height() - geo_el.outerHeight()) / 2));
-                }
-            }
-            $('div.box:not(.unselectable)', city_finder).bind('mouseover', function() {
-                $('div.selected', city_finder).removeClass('selected');
-                $(this).addClass('selected');
-            }).bind('click', function() {
-                selectCity(keybox);
-            });
-            return false;
-        }
-        , error: function() {
-            return;
-        }
-        , timeout: function() {
-            return;
-        }
-
-    });
-    return false;
-}
-
-function goCity(event, keybox)
-{
-    if (event.keyCode == 13)
-    {
-        event.preventDefault();
-        selectCity(keybox);
-        return false;
-    }
-}
-function selectCity(keybox)
-{
-    var city_finder = $(keybox).parent().find('.geoname_city_finder')
-    var val = '',
-            id = '',
-            el = $('div.selected div:first', city_finder);
-    if (el.length == 0)
-        el = false;
-    else
-    {
-        val = el.text();
-        id = $('div.selected', city_finder).attr('id').substr(4);
-    }
-    $(keybox).val(val);
-    $(keybox).next().val(id);
-    city_finder.empty();
-//	$(keybox).trigger('blur');
-
-    $(keybox).parent().find('.geoname_city_finder').empty();
-}

www/skins/login/less/skin.less

@@ -797,6 +797,50 @@ form[name=registerForm] .multiselect-group {
     left: 0;
 }
 
+.geocompleter-menu {
+    max-height: 180px;
+    overflow: auto;
+    background: @backgroundSideBar;
+    .glow(@sideBarGlow);
+    list-style-type: none;
+}
+
+.geocompleter-menu .ui-menu-item.selected {
+        border: 2px solid @green;
+}
+
+.geocompleter-menu .ui-menu-item a.ui-state-focus,
+.geocompleter-menu .ui-menu-item a.ui-state-hover,
+.geocompleter-menu .ui-menu-item a.ui-state-active {
+    text-decoration: none;
+}
+
+.geocompleter-menu .ui-menu-item {
+     padding: 5px 10px;
+}
+
+.geocompleter-menu .ui-menu-item:nth-child(odd) {
+     background: lighten(@backgroundSideBar, 25%);
+}
+
+.geocompleter-menu .region {
+    font-size:  @fontSizeMini;
+    font-style: italic;
+    display: block;
+}
+
+.geocompleter-menu .highlight {
+    background: @green;
+}
+
+.geocompleter-input.input-loading {
+    background: url('/skins/icons/loader-black.gif') @black center right no-repeat;
+}
+
+.geocompleter-input.input-error {
+    color: red !important;
+}
+
 /** IE Fixes */
 
 .lt-ie8 authentication-sidebar-language .caret {