select_city_show_and_hide_autocomplete.js

// Snippet by @ayosec on IM - Thx ayose! :)


//:ruby
//= form.input :city_id, :as => :string, :input_html => { :value => resource.city_id }

//:javascript
  jQuery(function() { city_autocompleter("#resource_city_id", "#{escape_javascript resource.localized_city_long_name || params[:city]}") });



function city_autocompleter (city_id, city_label) {
  city_id = $(city_id);
  var row = city_id.parent("li");

  // Oculta el campo que contiene el ID
  city_id.hide();

  // Crea el span que muestra el nombre de la ciudad
  var span_label = $("<span>").
    text(city_label).
    click(function () {
      var input = $("<input>").
        autocomplete("....").
        select(function(event, item) { 
          // El usuario seleciona un elemento del autocomplete
          // Se elimina el <input> y se actualiza el span

          city_id.val(item.id); // actualiza el ID
          span.text(item.texto).show(); // Actualiza el span con lo que había en la etiqueta del autocomplete y lo muestra
          input.remove(); // quita el input generado
        }).appendTo(row); // añade el input al <li>
    }).
    appendTo(row). // añade el <span> al <li>
    focus().       // deja el cursor en el autocomplete
    blur(function() {
      // si sale del autocomplete quita el campo
      span.show(); 
      input.remove(); 
    });
});