Wie man Set-up jquery-ui zur automatischen Vervollständigung in Rails

Question

Ich brauche Hilfe, wie eine implementieren jquery-ui zum automatischen Vervollständigung in meiner Rails-Anwendung.

Ich mag die automatische Vervollständigung in ein Textfeld hinzuzufügen, in dem der Benutzer in einem Kundennamen eingeben. Da es Hunderte von Kunden sein kann, muß ich die vorgeschlagene automatische Vervollständigung Wert ‚remote‘, wie in, aus einer Tabelle ziehen (zumindest das ist, was ich verstehe).

Der wichtigste Punkt I zu verstehen, bin Fehler ist, wie die vorgeschlagenen Werte in die Auto-Vervollständigung Textbox zur Verfügung zu stellen. Ich habe die jquery-ui-Dokumente lesen, aber ich glaube, ein bisschen dichter an dieser Angelegenheit sein.

Also, was ich bin wirklich nach ist ein Beispiel dafür, wie ich dies an der Arbeit in einer Rails-Anwendung zu bekommen, nicht unbedingt eine vollständige Beschreibung, wie das Javascript gebaut wird (das ist, was das jquery-ui-Team für mich getan hat =) ).

Zum Beispiel, wie kann ich die Daten für die automatische Vervollständigung vorbereiten und wie befestige ich die Auto-Vervollständigung Funktionalität auf eine Textbox.

Answer 1

Nun, ich habe nie eine Antwort auf meine Frage oben so landete ich mit es für mich herauszufinden. Ich dachte, ich sollte die Lösung poste ich mit für den Fall kam es irgendwelche anderen Jungs da draußen, die das Gleiche fragen.

Das erste, was Sie wissen sollten, ist, dass dies mit Javascript meine erste Erfahrung, und ich bin nur den Dreh Rails zu bekommen. Also mit allen Mitteln, fühlen Sie sich frei zu bearbeiten, kommentieren überall fühlen Sie ich mit diesem schiefgegangen haben. Richtig oder falsch zumindest ich weiß, dass es die Art und Weise funktioniert, ich wollte es.

Ich denke, der beste Weg, dies zu zeigen, indem Beispiel. Also folgende ist, wie ich den Autocomplete-Widget zur Arbeit in meiner app bekam. Sie können weiter gehen und den folgenden Code in Ihrer Anwendung setzen, auch wenn Sie nicht verstehen, was passiert ist, dann können wir gehen, wie jeder Teil von Beispiel arbeitet. Danach sollten Sie sich einen Einblick haben, wie für die Nutzung zu modifizieren oder es Refraktor.

Neue JQUERY UI IN YOUR RAILS APP.

Laden Sie eine Kopie des jQuery UI und Ort jquery-ui-1.8.2.custom. min.js in Ihrem / public / javascript Verzeichnis. Auch stellen Sie sicher, haben Sie eine Kopie von jQuery selbst und dass dies auch im selben Ordner.

Fügen Sie die jQuery UI-Datei und die jQuery-Datei in Ihrem application.html.erb Datei wie folgt.
(die Dateien Namen zugeteilt werden können, so lange bitte, wie sie zusammenpassen)

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

In der Download von jQuery UI, erhalten Sie einen Ordner, der alle Ihre CSS-Daten enthält. Der Name wird auf das Thema variieren Sie gewählt haben, zum Beispiel wählte ich das Thema ‚ cupertino ‘. Platzieren Sie den gesamten Ordner mit Ihren CSS-Daten in ' / public / stylesheets / '. Dann ist die CSS-Datei in Ihrem application.html.erb wie diese.

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

Beispiel zur automatischen Vervollständigung JAVASCRIPT

Nehmen Sie nun das folgende Stück Code und legen Sie sie in einem Ihrer ‚ neue ‘ Ansichten. Sie können dies in allen Ansichten, aber klar, dass ich buchstäblich aus einer vorhandenen Ansicht zu einer Steuerung gehör genommen habe ‚links_controller‘ genannt, und es wird, um Daten von einem ‚people_controller‘ ziehen. Hoffentlich wissen Sie genug über Rails um herauszufinden, was Sie so diese Arbeiten für Sie ändern müssen.

- Begin großes Stück 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 %>

- Ende Big Chunk of Code -

Okay, jetzt die Punkte zu verbinden.

PROVIDE DATEN zum automatischen Vervollständigung zu verwenden, wie VORSCHLäGE

Hier können beginnen, indem sie einige Daten Anschließen, dass die zur automatischen Vervollständigung Textfeld in der Dropdown-Vorschläge angezeigt werden kann. Das Format, das wir verwenden werden, ist JSON, aber keine Sorge, wenn Sie nicht mit ihm vertraut sind ... weder bin ich =). Es ist gut genug, um zu wissen, dass es eine Möglichkeit, Text-Format ist, so dass andere Teile von Ihnen / von anderen Anwendungen verwendet werden können.

Die Daten das Textfeld für die die automatische Vervollständigung benötigt werden im angegebenen ‚ Quelle: ‘ Option. Weil wir eine Liste der Völker Namen und ihre ID an die Autocomplete senden möchten wir die folgenden als Quelle setzen.

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

Helfer Die Schienen oben wird in eine Zeichenfolge übersetzen " /people.json ". Sie haben nicht eine Seite bei „ /people.json “ erstellen müssen. Was Sie tun, tun müssen, ist Ihre people_controller zu sagen, was zu tun ist, wenn es eine Anforderung für / Menschen mit dem .json Format empfängt. Setzen Sie den folgenden in Ihre 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

Jetzt haben wir alle die Menschen in @people an das Autocomplete Textfeld gesendet werden. Dies bringt den nächsten Punkt.

FILTER DATA ANGEWENDET Auto-Vervollständigen SUGGESTION, ON INPUT BASIS

Wie funktioniert das Autovervollständigen Textfeld wissen, wie die Ergebnisse filtern basierend auf was Sie schreiben?

Das Autocomplete-Widget auf dem Textfeld zugewiesen wird senden, was Sie eingebenin das Textfeld als Parameter an Ihre Quelle :. Der Parameter ist abgeschickt ist " Begriff ". Also, wenn Sie waren „Joe“ in das Textfeld eingeben, würden wir folgendes tun:

/people.json?term=joe

Aus diesem Grund haben wir die folgende in der Steuerung:

# 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

Nun, da wir die Anzahl der Datensätze zu @people zugewiesen beschränkt auf das, was in die zur automatischen Vervollständigung Textfeld eingegeben wird, können wir uns jetzt zuwenden, dass in JSON-Format für die Autocomplete-Vorschläge.

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

Nun, nur die Kommentare in der „Big Chunk of Code“ überprüfen, die zusammen den Rest, wie diese Beziehungen erklären sollte.

Am Ende sollen Sie ein Textfeld auf Ihrer Seite haben, der als die automatische Vervollständigung wirkt und ein verstecktes Feld, der die ID in einem Parameter an Ihre Controller senden.

PASSEN SIE IHRE EIGENEN Auto-Vervollständigen

Wenn Sie die oben verstehen und Sie wollen es für Ihren Gebrauch zu ändern, sollten Sie wissen, dass das Format JSON von Ihrem Controller Aussehen zurück wie folgt aus:

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

Die Art und Weise, die verschiedenen Werte aus dem JSON-String in Ihrem Javascript, in diesem Fall für den Zugriff wäre:

ui.item.person.name_of_some_attribute_such_as_given_name

Pretty, einfach. Eine Menge, wie ein Active Attribut in Rails erreichbar.

Eine letzte Anmerkung. Ich verbrachte viel Zeit für einen anderen Weg, um den verborgenen Wert zu liefern, da ich diese Funktion gedacht sollte in das Jquery-Widget gebaut wurden. Dies ist jedoch nicht der Fall. Es ist eindeutig in dem offiziellen jQuery Beispiel gezeigt, dass die Art und Weise, einen anderen Wert dann als Parameter ausgewählt zu senden, ist ein verstecktes Feld zu verwenden.

Nun, ich hoffe, das hilft jemand.

Dale

Answer 2

jQuery 1.9 / 1.10 entfernt, um die Schlüssel und automatische Vervollständigung hinzugefügt uiAutocomplete

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

Nach oben modifiziert, es funktionierte für mich.

Answer 3

Dales Antwort ist ganz im Tutorial. Eine Sache zu beachten ist, dass Ihre erste Abfrage, die Datenquelle nur Streichhölzer zurückkehren Anfang mit der Zeichenfolge angezeigt werden. Wenn Sie in dem Wort suchen überall wollen, müssen Sie ändern:

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

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

(eine zusätzliche % zur Abfrage hinzugefügt)

Answer 4

ich im Grunde Dale Rat unter, aber mein Controller und js gefolgt Dateien wurden DIFF- leicht seine Version gab mir Fragen aus irgendeinem Grunde (vielleicht bc von jquery Updates)

Kontext: Ich bin zu dem automatischen Vervollständigung Namen der DJs versuchen, in von Nutzern eingegeben - auch ein newb

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

html.erb Datei

  <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

Dies ist eine große Hilfe.

Neben es für den Fall, wenn Sie URL des Bildes von Benutzern holen müssen, könnte es nicht möglich sein, mit to_json. Dazu den folgenden Code in Modell hinzuzufügen.

def avatar_url
    avatar.url(:thumb)
end

Und dann in der Steuerung statt to_json Verwendung as_json

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

Answer 6

Es ist wichtig zu beachten, dass, wenn Ihre ‚Quelle‘ relativ klein ist, beispielsweise 50 Elemente, sollte die Umsetzung unterschiedlich sein (und viel einfacher). Es wird im vierten Absatz des offiziellen doc erwähnt:

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

Wenn die lokalen Daten verwendet alles, was Sie tun müssen, ist es, die Daten zu erhalten und an die Autocomplete-Methode übergeben, und es wird für Sie die Filterung tun. Sie müssen nicht jedes Mal, wenn ein Begriff ES eingegeben gehen hin und her auf den Server benötigen.

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