48 votes

Comment configurer jquery-ui autocomplete dans Rails

J'ai besoin d'aide sur la façon de mettre en œuvre un jquery ui autocomplete dans mon application Rails.

Je veux ajouter l'auto-complétion à un champ de texte où l'utilisateur peut entrer un nom de client. Comme il peut y avoir des centaines de clients, j'ai besoin de tirer l'a suggéré l'auto-complétion des valeurs "à distance", comme, à partir d'une table (au moins c'est ce que je comprends).

Le principal point je suis à défaut de comprendre comment fournir les valeurs proposées pour l'auto-complétion zone de texte. J'ai lu le jquery-ui docs, mais il me semble être un peu dense sur cette question.

Donc, ce que je suis vraiment après est un exemple de comment je peux obtenir que cela fonctionne dans une application Rails, pas nécessairement une description complète de la façon dont le javascript est construit (c'est ce que le jquery-ui équipe a fait pour moi =) ).

Par exemple, comment dois-je préparer les données pour l'auto-complétion, et comment dois-je fixer la fonctionnalité d'auto-complétion à une zone de texte.

Si quelqu'un pouvait aider sur ce que pourrait être cool.

136voto

Paz Points 1903

Eh bien je n'ai jamais eu de réponse à ma question ci-dessus, donc j'ai fini par le comprendre par moi-même. J'ai pensé que je devrais poster la solution, je suis venu avec dans le cas où il y a d'autres gars là-bas qui se demandent la même chose.

La première chose que vous devez savoir, c'est que c'est ma première expérience avec javascript, et je suis tout juste d'obtenir le coup de Rails. Donc par tous les moyens, n'hésitez pas à modifier, commenter n'importe où vous vous sentez j'ai mal passé avec le présent. De bonne ou de mauvaise, je sais au moins qu'il fonctionne de la façon dont je le voulais.

Je pense que la meilleure façon de le démontrer est par exemple. Donc voici comment j'ai eu le widget de saisie semi-automatique pour travailler dans mon application. Vous pouvez aller de l'avant et placez le code suivant dans votre application, même si vous ne comprenez pas ce qui se passe, alors nous pouvons aller sur la façon dont chaque partie est de travail par exemple. Après cela, vous devez avoir une connaissance sur la façon de le modifier à votre utilisation ou de la lunette.


INCLURE JQUERY UI DANS VOTRE APPLICATION RAILS.

Télécharger une copie de jQuery UI et le lieu jquery-ui-1.8.2.custom.min.js à l'intérieur de votre /public/javascript répertoire. Assurez-vous également que vous avez une copie de jQuery lui-même et que c'est aussi dans le même dossier.

Inclure jQuery UI fichier et le fichier jQuery dans votre application.html.erb fichier comme ceci.
(vous pouvez nommer les fichiers comme vous voulez, tant qu'ils correspondent)

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

Dans votre téléchargement de jQuery UI, vous aurez un dossier qui contient tous vos CSS de données. Le nom varie en fonction du thème que vous avez choisi, par exemple, j'ai choisi le thème decupertino'. Lieu de la totalité du dossier contenant votre code CSS de données en"/public/stylesheets/'. Puis d'inclure le fichier CSS dans votre application.html.erb comme ça.

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


EXEMPLE DE SAISIE SEMI-AUTOMATIQUE JAVASCRIPT

Maintenant, prenez le morceau suivant de code et de le placer dans l'un de vos"nouvelles"vues. Vous pouvez l'utiliser dans n'importe quelle vue, mais rends compte que j'ai littéralement pris à partir d'une vue existante appartenant à un contrôleur appelé "links_controller", et c'est de l'extraction de données à partir d'un 'people_controller'. J'espère que vous en savez assez sur les Rails de travailler ce que vous avez besoin de changer si cela fonctionne pour vous.

-- Début de gros morceau de code --

    <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 de la Gros Morceau de Code --

Ok maintenant de relier les points.


FOURNIR DES DONNÉES POUR LA SAISIE SEMI-AUTOMATIQUE POUR L'UTILISER COMME SUGGESTIONS

Permet de commencer par la connexion des données de la saisie semi-automatique textfield peuvent s'afficher dans la liste de suggestions. Le format que nous allons utiliser est JSON, mais ne vous inquiétez pas si vous n'êtes pas familier avec elle ... je ne suis =). Il est suffisant de savoir que c'est une façon de formater du texte, de sorte que les autres parties de la vôtre/les autres applications de l'utiliser.

Les données de la textfield aurez besoin pour la saisie semi-automatique est spécifié dans la 'source:"option. Parce que nous voulons envoyer à une liste de noms de peuples et de leur carte d'identité à la saisie semi-automatique, nous allons mettre la suite en tant que source.

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

Les rails helper ci-dessus se traduira par une chaîne de caractères "/les gens.json". Vous n'avez pas besoin de créer une page "/les gens.json". Ce que vous devez faire est de dire à votre people_controller quoi faire lorsqu'il reçoit une demande d' /people avec le .format json. Ajouter la ligne suivante dans votre 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

Maintenant, nous avons tous les gens dans @gens d'être envoyé à la saisie semi-automatique textfield. Ceci nous amène à la prochaine point.


FILTRER LES DONNÉES UTILISÉES POUR LA SUGGESTION DE SAISIE SEMI-AUTOMATIQUE, BASÉE SUR LA SAISIE

Comment la saisie semi-automatique textfield savoir comment filtrer les résultats en fonction de ce que vous tapez?

La saisie semi-automatique widget affecté à la textfield va envoyer ce que vous tapez dans la zone de texte en tant que paramètre à votre source:. Le paramètre envoyé est "à terme". Donc, si vous êtes de type "Joe" dans la zone de texte, nous serions en procédant de la manière suivante:

/people.json?term=joe

C'est pourquoi nous avons les éléments suivants dans le contrôleur:

# 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

Maintenant que nous avons limité le nombre d'enregistrements affectés à @personnes sur la base de ce qui est tapé dans le champ de saisie semi-automatique, nous pouvons maintenant nous tourner que dans un format JSON pour les suggestions de saisie semi-automatique.

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

Maintenant, il suffit de passer en revue les commentaires à l'intérieur du "Gros Morceau de Code", ce qui doit expliquer le reste de la façon dont cela est lié ensemble.

À la fin, vous devriez avoir un champ de texte sur votre page, qui agit comme la saisie semi-automatique et d'un champ caché qui va envoyer l'ID en paramètre à votre contrôleur.


PERSONNALISER VOTRE PROPRE SAISIE SEMI-AUTOMATIQUE

Une fois que vous comprenez ci-dessus et que vous souhaitez le modifier pour votre usage, vous devriez savoir que le format JSON retourné à partir de votre contrôleur ressemble à ceci:

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

Le chemin pour accéder aux différentes valeurs de la chaîne JSON dans votre javascript dans ce cas serait:

l'interface utilisateur.de l'élément.personne.name_of_some_attribute_such_as_given_name

Jolie, simple. Un peu comme l'accès à une ActiveRecord attribut dans les Rails.

Une dernière remarque. J'ai passé beaucoup de temps à la recherche d'un autre moyen de fournir de la valeur cachée, comme je pensais que cette fonction doit avoir été construit dans le widget jquery. Cependant, ce n'est pas le cas. Il est clairement indiqué dans l'officiel de jQuery exemple que le moyen d'envoyer une valeur différente alors sélectionné comme paramètre, est d'utiliser un champ caché.

Eh bien, j'espère que ça aide quelqu'un.

Dale

9voto

Arun Points 293

jQuery 1.9 / 1.10 a supprimé la clé de saisie semi-automatique et ajouté uiAutocomplete

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

Après la modification ci-dessus, cela a fonctionné pour moi.

2voto

Bongs Points 2378

C'est une aide précieuse.

En plus de cela si vous devez récupérer l'URL de l'image de l'utilisateur, cela pourrait ne pas être possible avec to_json . Pour cela, ajoutez le code suivant dans le modèle.

 def avatar_url
    avatar.url(:thumb)
end
 

Et puis dans le contrôleur au lieu de to_json utiliser as_json

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: