Cómo puesta a punto de autocompletar jquery-ui en Rails

Question

necesito ayuda sobre cómo implementar un jquery-ui autocompletar en mi aplicación Rails.

Quiero añadir la terminación automática a un campo de texto donde el usuario puede introducir un nombre de cliente. Como no puede ser de cientos de clientes, que tendrá que tirar de los valores de auto-realización sugeridas 'a distancia', como en, de una tabla (al menos esto es lo que entiendo).

El punto principal que estoy fallando a entender es cómo proporcionar los valores sugeridos para el cuadro de texto de autocompletar. He leído los documentos jquery-ui, pero me parece que ser un poco densa en esta materia.

Así que lo que estoy realmente después es un ejemplo de cómo puedo conseguir que esto funcione en una aplicación Rails, no necesariamente una descripción completa de cómo se construye el Javascript (que es lo que el equipo jquery-ui ha hecho por mí =) ).

Por ejemplo, ¿Cómo preparo los datos para la terminación automática, y cómo lo adjuntar la funcionalidad de autocompletar a un cuadro de texto.

Answer 1

Bueno, yo nunca recibí una respuesta a mi pregunta anterior, así que terminé tener que averiguarlo por mí mismo. Pensé que debería publicar la solución que se me ocurrió en el caso de que existan otros chicos por ahí que se preguntan lo mismo.

Lo primero que debe saber es que esta es mi primera experiencia con Javascript, y sólo estoy tomando la mano de rieles. Así que por todos los medios, no dude en editar, comentar cualquier lugar que siento que tengo mal se ha ido con esto. Bien o mal por lo menos sé que funciona de la manera que quería.

creo que la mejor manera de demostrar esto es con el ejemplo. Así que la siguiente es cómo llegué el widget de autocompletar a trabajar en mi aplicación. Usted puede seguir adelante y poner el siguiente código en su aplicación, incluso si usted no entiende lo que está sucediendo, entonces puede ir sobre cómo cada parte está trabajando con el ejemplo. Después de esto, usted debe tener una idea sobre cómo modificarlo para su uso o refractor ella.

Añadir jQuery UI EN SU aplicación Rails.

Descargar una copia de la jQuery UI y lugar jquery-ui-1.8.2.custom. min.js dentro de su directorio / public / javascript. También asegúrese de que tiene una copia de sí mismo jQuery y que esto también está en la misma carpeta.

Incluir el archivo de jQuery UI y el archivo de jQuery en su application.html.erb archivo como este.
(se puede nombrar los archivos como desee, siempre y cuando coinciden)

<%= javascript_include_tag 'jquery.min', 'jquery-ui-1.8.2.custom.min.js' %>

En la descarga de jQuery UI, que tendrá una carpeta que contiene todos los datos de CSS. El nombre puede variar en función del tema que elija, por ejemplo, he elegido el tema ' Cupertino '. Coloque toda la carpeta que contiene sus datos CSS en ' / public / hojas de estilo / '. A continuación, incluir el archivo CSS en su application.html.erb como este.

<%= stylesheet_link_tag 'cupertino/jquery-ui-1.8.2.custom' %>

Ejemplo de autocompletar JAVASCRIPT

Ahora toma el siguiente fragmento de código y colocarlo en uno de sus ' new ' puntos de vista. Puede utilizar esto en cualquier punto de vista, pero se dan cuenta de que, literalmente, lo he tomado desde una vista existente perteneciente a un controlador llamado 'links_controller', y se está tirando de los datos de un 'people_controller'. Con suerte usted sabe lo suficiente sobre rieles a trabajar en lo que tiene que cambiar por lo que esto funcione para usted.

- Comience gran trozo de código -

    <script type="text/javascript">
    $(function() {

 // Below is the name of the textfield that will be autocomplete    
    $('#select_origin').autocomplete({
 // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
            minLength: 2,
 // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
            source: '<%= people_path(:json) %>',
  // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
            focus: function(event, ui) {
                $('#select_origin').val(ui.item.person.given_name);
                return false;
            },
 // Once a value in the drop down list is selected, do the following:
            select: function(event, ui) {
 // place the person.given_name value into the textfield called 'select_origin'...
                $('#select_origin').val(ui.item.person.given_name);
 // and place the person.id into the hidden textfield called 'link_origin_id'. 
        $('#link_origin_id').val(ui.item.person.id);
                return false;
            }
        })
 // The below code is straight from the jQuery example. It formats what data is displayed in the dropdown box, and can be customized.
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
 // For now which just want to show the person.given_name in the list.
                .append( "<a>" + item.person.given_name + "</a>" )
                .appendTo( ul );
        };
    });
    </script>



<h1>New link</h1>

<% form_for(@link) do |f| %>
  <%= f.error_messages %>

<!-- Place the following text fields in your form, the names are not important. What is important is that they match the names in your javascript above -->
  <p>
        Select which person you want to link:<br /> 
<!-- This is the textfield that will autocomplete. What is displayed here is for the user to see but the data will not go anywhere -->
        <input id="select_origin"/>
<!-- This is the hidden textfield that will be given the Persons ID based on who is selected. This value will be sent as a parameter -->
      <input id="link_origin_id" name="link[origin_id]" type="hidden"/>
  </p>
<!-- end of notes -->
  <p>
    <%= f.label :rcvd_id %><br />
    <%= f.text_field :rcvd_id %>
  </p>
  <p>
    <%= f.label :link_type %><br />
    <%= f.text_field :link_type %>
  </p>
  <p>
    <%= f.label :summary %><br />
    <%= f.text_area :summary %>
  </p>
  <p>
    <%= f.label :active %><br />
    <%= f.check_box :active %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
<% end %>

- Fin gran trozo de código -

Bueno ahora a conectar los puntos.

proporcionar datos para Autocompletar para su uso como SUGERENCIAS

Vamos a empezar conectando hasta algunos datos que el campo de texto de autocompletar puede mostrar en el menú desplegable sugerencias. El formato que va a utilizar es JSON, pero no se preocupe si no está familiarizado con él ... ni yo =). Es lo suficientemente bueno como para saber que es una manera de dar formato al texto de manera que otras partes de la suya / otras aplicaciones pueden usarlo.

Los datos del campo de texto va a necesitar para la función de autocompletar se especifica en el ' fuente: ' opción. Debido a que queremos enviar una lista de nombres de personas y su documento de identidad a la función de autocompletar pondremos el siguiente como la fuente.

source: '<%= people_path(:json) %>'  

Los rieles ayudante de arriba se traducirá en una cadena " /people.json ". No es necesario crear una página en " /people.json ". Lo que se hace hay que hacer es decirle a su people_controller qué hacer cuando se recibe una solicitud de / personas con el formato .json. Ponga lo siguiente en su people_controller:

def index  
# I will explain this part in a moment.
  if params[:term]
    @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
  else
    @people = Person.all
  end

  respond_to do |format|  
    format.html # index.html.erb  
# Here is where you can specify how to handle the request for "/people.json"
    format.json { render :json => @people.to_json }
    end
end

Ahora que tenemos todas las personas en @people de ser enviado al campo de texto de autocompletar. Esto nos lleva a la siguiente punto.

DATOS PARA filtro utilizado Autocompletar sugerencia, basada en la entrada

¿Cómo funciona el saber cómo autocompletar el campo de texto para filtrar los resultados sobre la base de lo que escribe?

El widget de autocompletar asignado al campo de texto enviará lo que se ingreseen el campo de texto como parámetro a la fuente :. El parámetro de ser enviado es " término ". Así que si tuviera que escribir "Joe" en el campo de texto, estaríamos haciendo lo siguiente:

/people.json?term=joe

Es por eso que tenemos el siguiente en el controlador:

# If the autocomplete is used, it will send a parameter 'term', so we catch that here
    if params[:term]
# Then we limit the number of records assigned to @people, by using the term value as a filter.
      @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
# In my example, I still need to access all records when I first render the page, so for normal use I assign all. This has nothing to do with the autocomplete, just showing you how I used it in my situation.
    else
      @people = Person.all
    end

Ahora que hemos limitado el número de registros asignados a @people basado en lo que está escrito en el campo de texto de autocompletar, ahora podemos convertir eso en formato JSON para las sugerencias de autocompletado.

respond_to do |format|  
      format.html # index.html.erb  
      format.json { render :json => @people.to_json }
    end 

Ahora, basta con revisar los comentarios dentro de la "gran parte del Código", que debe explicar el resto de cómo esto se relaciona entre sí.

Al final debe tener un campo de texto en su página que actúa como el autocompletado y un campo oculto que enviará el ID de un parámetro a su controlador.

personalizar sus propios Autocompletar

Una vez que entienda lo anterior y desea modificarlo para su uso, se debe saber que el formato JSON regresó de su apariencia controlador de esta manera:

[{"person":{"id":1,"given_name":"joe","middle_name":"smith","family_name":"jones","nationality":"australian"}}]

La forma de acceder a los diferentes valores de la cadena JSON en su javascript en este caso sería:

ui.item.person.name_of_some_attribute_such_as_given_name

bastante, simple. Muy parecido a acceder a un atributo ActiveRecord en Rails.

Una última nota. Pasé mucho tiempo buscando una manera diferente de suministrar el valor oculto, ya que pensé que esta función debe haber sido construido en el widget jQuery. Sin embargo, éste no es el caso. Se muestra claramente en el ejemplo oficial jQuery que la manera de enviar un valor diferente, entonces seleccionado como un parámetro, es utilizar un campo oculto.

Bueno, yo esperanza de que ayude a alguien.

Dale

Answer 2

jQuery 1,9 / 1,10 retira el autocompletar clave y ha añadido uiAutocomplete

.data("uiAutocomplete") instead of .data("autocomplete")

Después de modificar anteriormente, que trabajó para mí.

Answer 3

de Dale respuesta es bastante el tutorial. Una cosa a destacar es que la utilización de su primera consulta, el origen de datos sólo devolverá partidos comenzando con la cadena que escribe. Si desea buscar en cualquier parte de la palabra, es necesario el cambio:

@people = Person.find(:all,:conditions =>
    ['given_name LIKE ?', "#{params[:term]}%"])

a

@people = Person.find(:all,:conditions =>
    ['given_name LIKE ?', "%#{params[:term]}%"])

(añadido un % adicional para la consulta)

Answer 4

Yo, básicamente siguió el consejo de Dale a continuación, pero mis controlador y los archivos js fueron ligeramente Diff- su versión me estaba dando problemas por alguna razón (tal vez bc de cambios jquery)

Contexto: Estoy tratando de autocompletar nombres de los DJ escritos en los usuarios - también es un Novato

DJ Controller

 class DjsController < ApplicationController
    def index
     if params[:term]
       @djs = Dj.is_dj.where('lower(name) LIKE ?', "%#{params[:term].downcase}%")
       respond_to do |format|  
          format.html
          format.json { render :json => @djs.map(&:name) }
       end
     end    
   end
 end

archivo html.erb

  <script type="text/javascript">

$(function() {  
    $('#select_origin').autocomplete({
        source: '<%= djs_path(:json) %>'
      })

    $('.submit-comment').click(function(){
      var dj_name = $('#select_origin').val();
      $('#link_origin_id').val(dj_name);
    })

})

</script>

Answer 5

Esta es una gran ayuda.

Además de que en el caso si tendrá que obtener la URL de la imagen del usuario, puede que no sea posible con to_json. Para que añadir el siguiente código en el modelo.

def avatar_url
    avatar.url(:thumb)
end

Y luego, en vez de controlador de uso to_json as_json

respond_to do |format|
    format.json {render :json => @users.as_json(:only => [:id,:name,:username], :methods => [:avatar_url]) }
end 

Answer 6

Es importante tener en cuenta que si su 'fuente' es relativamente pequeña, por ejemplo de 50 elementos, la aplicación debe ser diferente (y mucho más simple). Se menciona en el cuarto párrafo del documento oficial:

https://api.jqueryui.com/autocomplete/

Cuando se utilizan datos locales de todo lo que necesita hacer es obtener los datos y la envíe al método de autocompletar, y lo hará el filtrado para usted. No es necesario para ir y venir al servidor cada vez que entró de Es un término.

function filterByTags(tags) {
  $("#stories-filter").autocomplete({
     source: tags,
     autoFocus: true
  });
}

$("#stories-filter").click(function() {
  $.ajax({
    dataType: 'json',
    method: 'GET',
    url: 'tags/index',
    data: $(this).data('project-id'),
    success: function (response) {
      if(response.success) {
        var tags = response.data.tags;
        filterByTags(tags);
      }
    },
    error: function (response) {
      if(response.status === 422) {
        var $errors = 'There are no tags in this project',
            $errorsContainer = $('.error-container');
        $errorsContainer.append($errors);
        $errorsContainer.show();
      }
    }
  });
});