In Rails, Was ist der beste Weg, um Autocomplete, die Namen zeigt aber IDs verwendet?

Question

Ich möchte ein Textfeld, dass der Benutzer in, die eine Ajax-gefüllte Liste der Namen meines Modells zeigt eingeben kann, und dann, wenn der Benutzer eine wählt ich die HTML, um die ID des Modells zu speichern, und verwenden, wenn das Formular gesendet wird.

Ich habe auf dem auto_complete Plugin herumgestochert, das in Rails 2 abgeschafft wurde, aber es scheint keine Ahnung zu haben, dass dies nützlich sein könnte. Es gibt eine Railscast-Folge die die Verwendung dieses Plugins behandelt, aber nicht auf dieses Thema eingeht. Die Kommentare darauf hinweisen, dass dies ein Problem sein könnte y zeigen auf model_auto_completer als eine mögliche Lösung Das scheint zu funktionieren, wenn es sich bei den angezeigten Elementen um einfache Zeichenketten handelt, aber der eingefügte Text enthält viele Leerzeichen, wenn man (wie ich es gerne tun würde) ein Bild in die Listenelemente einfügt, entgegen den Angaben in der Dokumentation .

Ich könnte mich wahrscheinlich hacken model_auto_completer in Form zu bringen, und vielleicht werde ich das auch weiterhin tun, aber ich bin gespannt, ob es bessere Möglichkeiten gibt.

Answer 1

Ich habe meinen eigenen gedreht. Der Prozess ist ein wenig verworren, aber...

Ich habe gerade ein text_field auf dem Formular mit einem Beobachter gemacht. Wenn Sie beginnen, in das Textfeld zu tippen, sendet der Beobachter den Suchstring und der Controller gibt eine Liste von Objekten zurück (maximal 10).

Die Objekte werden dann über einen Teilbereich zum Rendern gesendet, der die dynamischen Autovervollständigungs-Suchergebnisse ausfüllt. Das Partial füllt eigentlich link_to_remote-Zeilen, die wieder an den Controller zurückgesendet werden. Der link_to_remote sendet die ID der Benutzerauswahl und dann einige RJS bereinigt die Suche, füllt in den Namen in das Textfeld, und legt dann die ausgewählte ID in ein verstecktes Formularfeld.

Puh... Ich konnte nicht finden, ein Plugin, dies zu der Zeit zu tun, so rollte ich meine eigenen, ich hoffe, das alles macht Sinn.

Answer 2

Ich habe eine ausgefeilte Lösung für die Leerzeichen im Bild. Ich fügte eine :after_update_element => "trimSelectedItem" in den Options-Hash der Datei model_auto_completer (das ist die erste der drei angegebenen Hashes). Mein trimSelectedItem findet dann das entsprechende Unterelement und verwendet dessen Inhalt für den Elementwert:

function trimSelectedItem(element, value, hiddenField, modelID) {
    var span = value.down('span.display-text')
    console.log(span)
    var text = span.innerText || span.textContent
    console.log(text)
    element.value = text
}

Dies verstößt dann jedoch gegen die :allow_free_text die standardmäßig den Text zurücksetzt, sobald das Textfeld den Fokus verliert, wenn der Text darin kein "gültiges" Element aus der Liste ist. Also musste ich auch das ausschalten, indem ich die Option :allow_free_text => true in den Optionen-Hash (wiederum der erste Hash). Mir wäre es allerdings lieber, wenn es eingeschaltet bliebe.

Mein aktueller Aufruf zur Erstellung des Autovervollständigers lautet also:

<%= model_auto_completer(
    "line_items_info[][name]", "", 
    "line_items_info[][id]", "",
    {:url => formatted_products_path(:js),
     :after_update_element => "trimSelectedItem",
     :allow_free_text => true},
    {:class => 'product-selector'},
    {:method => 'GET',  :param_name => 'q'}) %>

Und die products/index.js.erb ist:

 <ul class='products'>
    <%- for product in @products -%>
    <li id="<%= dom_id(product) %>">
            <%= image_tag image_product_path(product), :alt => "" %>
            <span class='display-text'><%=h product.name %></span>
    </li>
    <%- end -%>
 </ul>