Come set-up jquery-ui completamento automatico in Rails

Question

Ho bisogno di aiuto su come implementare un jquery-ui completamento automatico nella mia applicazione Rails.

Voglio aggiungere il completamento automatico per un campo di testo in cui l'utente può inserire un nome del cliente. Come ci possono essere centinaia di clienti, ho bisogno di tirare i valori di auto-completamento suggerite 'a distanza', come in, da una tabella (almeno questo è quello che ho capito).

Il punto principale che sto riuscendo a capire è come fornire i valori suggeriti per la casella di testo completamento automatico. Ho letto i documenti jquery-ui, ma mi sembra di essere un po 'denso in materia.

Quindi quello che sono veramente, dopo è un esempio di come posso ottenere questo al lavoro in un'applicazione Rails, non necessariamente una descrizione completa di come il javascript è costruito (che è ciò che il team di jQuery-ui ha fatto per me =) ).

Per esempio, come faccio a preparare i dati per il completamento automatico, e come si allegare la funzionalità di completamento automatico per una casella di testo.

Answer 1

Beh non ho mai avuto una risposta alla mia domanda di cui sopra così ho finito per dover capirlo per me stesso. Ho pensato di postare la soluzione mi è venuta nel caso in cui ci siano altri ragazzi là fuori che si stanno chiedendo la stessa cosa.

La prima cosa che dovete sapere è che questa è la mia prima esperienza con javascript, e io sono solo ottenere il blocco di Rails. Quindi, con tutti i mezzi, sentitevi liberi di modificare, commentare ovunque si sento di avere sbagliato andato con questo. Giusto o sbagliato almeno so che funzioni nel modo che volevo a.

Penso che il modo migliore per mostrare questo è l'esempio. Quindi il seguente è come ho ottenuto il widget di completamento automatico al lavoro nella mia app. Si può andare avanti e mettere il seguente codice nella vostra applicazione, anche se non si capisce cosa sta succedendo, allora possiamo andare oltre come ogni parte sta lavorando con l'esempio. Dopo questo si dovrebbe avere una conoscenza su come modificarlo per il vostro uso o rifrattore esso.

CONTENERE jQuery UI NEL VOSTRO applicazione Rails.

Scarica una copia del jQuery UI e luogo jquery-ui-1.8.2.custom. min.js all'interno del / / javascript directory pubblica. Inoltre, assicurarsi di avere una copia di se stesso e jQuery che questo è anche nella stessa cartella.

Includere il file di jQuery UI e il file jQuery nel application.html.erb file come questo.
(è possibile il nome dei file come ti pare, purché corrispondano)

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

La procedura di scaricamento di jQuery UI, si avrà una cartella che contiene tutti i dati CSS. Il nome può variare in base al tema scelto, ad esempio, ho scelto il tema ' Cupertino '. Posizionare l'intera cartella che contiene i dati CSS in ' / public / stylesheets / '. Quindi includere il file CSS nel vostro application.html.erb come questo.

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

ESEMPIO AUTOCOMPLETE JAVASCRIPT

Ora prendete il seguente pezzo di codice e metterlo in uno dei vostri ' nuovi ' viste. È possibile utilizzare questo in qualsiasi vista, ma rendersi conto che ho letteralmente preso da una vista esistente appartenente a un controller chiamato 'links_controller', e sta tirando i dati da un 'people_controller'. Speriamo che si sa abbastanza di Rails per capire ciò che è necessario cambiare così questo funziona per voi.

- Begin grande pezzo di codice -

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

- Fine Grande pezzo di codice -

Va bene ora di unire i puntini.

fornire suggerimenti DATI per il completamento automatico da utilizzare come

Iniziamo collegando alcuni dati che il campo di testo di completamento automatico in grado di visualizzare nel menu a discesa suggerimenti. Il formato che useremo è JSON, ma non preoccupatevi se non si ha familiarità con esso ... non sono io =). E 'abbastanza buono per sapere che si tratta di un modo per formattare il testo in modo che altre parti del tuo / altre applicazioni possono utilizzare.

I dati del campo di testo avrà bisogno per il completamento automatico è specificato nella ' fonte: ' opzione. Perché vogliamo inviare un elenco di nomi delle persone e la loro identità per il completamento automatico metteremo il seguente come origine.

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

I binari helper sopra si tradurrà in una stringa " /people.json ". Non è necessario creare una pagina a " /people.json ". Che cosa si ha bisogno di fare e dire la vostra people_controller cosa fare quando riceve una richiesta di / le persone con il formato .json. Inserire il seguente nella vostra 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

Ora abbiamo tutte le persone in @people di essere inviato al campo di testo di completamento automatico. Questo porta in primo piano il punto successivo.

DATI filtro utilizzato per AUTOCOMPLETE suggerimento, sulla base di input

Come funziona il know completamento automatico campo di testo come filtrare i risultati in base a ciò che si digita?

Il completamento automatico widget di assegnare al campo di testo invierà qualunque cosa digitinel campo di testo come parametro per la vostra fonte :. L'essere inviato parametro è " termine ". Quindi, se si digita "Joe" nel campo testuale, saremmo nel seguente modo:

/people.json?term=joe

Questo è il motivo per cui abbiamo la seguente nel controller:

# 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

Ora che abbiamo limitato il numero di record assegnati a @people in base a ciò che viene digitato nel campo testuale a completamento automatico, ora possiamo trasformarla in formato JSON per i suggerimenti di completamento automatico.

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

Ora, basta rivedere i commenti all'interno del "Big pezzo di codice" che dovrebbe spiegare il resto del funzionamento di questa lega insieme.

Alla fine si dovrebbe avere un campo di testo nella pagina che agisce come il completamento automatico e un campo nascosto che invierà l'ID in un parametro per il controller.

Personalizza il tuo AUTOCOMPLETE PROPRIO

Una volta capito quanto sopra e si vuole modificarlo per il vostro uso, si dovrebbe sapere che il formato JSON restituito dal tuo aspetto del controller in questo modo:

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

Il modo per accedere ai diversi valori dalla stringa JSON in javascript in questo caso sarebbe:

ui.item.person.name_of_some_attribute_such_as_given_name

Piuttosto, semplice. Un po 'come l'accesso a un attributo ActiveRecord in Rails.

Un'ultima nota. Ho passato un sacco di tempo alla ricerca di un modo diverso di fornire il valore nascosto, come ho pensato questa funzione avrebbe dovuto essere integrato nel widget di jQuery. Tuttavia, questo non è il caso. E 'chiaramente mostrato nell'esempio ufficiale jQuery che il modo di inviare un valore diverso quindi selezionato come parametro, è quello di utilizzare un campo nascosto.

Beh spero che aiuta qualcuno.

Dale

Answer 2

jQuery 1.9 / 1.10 ha rimosso il completamento automatico chiave e ha aggiunto uiAutocomplete

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

Dopo aver modificato in precedenza, ha funzionato per me.

Answer 3

di Dale risposta è tutto il tutorial. Una cosa da notare è che usare la vostra prima query, l'origine dati restituirà solo le partite inizio con la stringa si digita. Se si desidera avviare una ricerca in qualsiasi punto della parola, è necessario cambiare:

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

a

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

(aggiunto un % in più per la query)

Answer 4

In pratica ho seguito il consiglio di Dale qui sotto, ma i miei file js controller e sono stati un po 'di Verifica la sua versione mi stava dando problemi per qualche motivo (forse bc aggiornamenti jQuery)

Contesto: Sto cercando di nomi di completamento automatico dei DJ digitati in dagli utenti - anche una newb

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

file 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

Questo è un grande aiuto.

In aggiunta ad esso nel caso in cui se hai bisogno di recuperare l'URL di un'immagine di utenti, potrebbe non essere possibile con to_json. Per questo aggiungere il seguente codice nel modello.

def avatar_url
    avatar.url(:thumb)
end

E poi nel controllore, invece di utilizzo 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

E 'importante notare che se il vostro 'sorgente' è relativamente piccolo, ad esempio 50 elementi, l'attuazione dovrebbe essere diverso (e molto più semplice). E 'menzionato nel quarto paragrafo del documento ufficiale:

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

Quando si utilizzano dati locali tutto quello che dovete fare è ottenere i dati e passare al metodo di completamento automatico, e lo farà il filtraggio per voi. Non hai bisogno di andare avanti e indietro per il server ogni volta che un termine entrato es.

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();
      }
    }
  });
});