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
