Dans Rails, quel est le meilleur moyen d'obtenir une saisie semi-automatique qui affiche des noms mais utilise des identifiants?

Question

Je souhaite avoir une zone de texte dans laquelle l'utilisateur peut taper, qui affiche une liste de noms de modèle remplie par Ajax. Ensuite, lorsque l'utilisateur sélectionne celui-ci, je souhaite que le code HTML enregistre l'ID du modèle et l'utilise lorsque le formulaire est soumis.

Je suis en train de fouiller dans le plugin auto_complete qui a été excisé dans Rails 2, mais il ne semble pas que cela puisse être utile. Il existe un épisode Railscast qui couvre l'utilisation de ce plugin, mais cela ne touche pas sur ce sujet. Les commentaires signalent qu'il pourrait s'agir d'un problème et pointez sur model_auto_completer comme solution possible , ce qui semble fonctionner si les éléments visualisés sont des chaînes simples, mais le texte inséré inclut de nombreux espaces indésirables si (comme je le voudrais bien), vous incluez une image dans les éléments de la liste, malgré ce que dit la documentation .

Je pourrais probablement pirater model_auto_completer , et je le ferai peut-être quand même, mais je suis impatient de savoir s'il existe de meilleures options.

Answer 1

J'ai un correctif usé pour les espaces indésirables de l'image. J'ai ajouté un : after_update_element = > "trimSelectedItem" au hachage options du model_auto_completer (c'est le premier hachage des trois donnés). Mon trimSelectedItem trouve ensuite le sous-élément approprié et utilise le contenu de celui-ci pour la valeur de l'élément:

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
}

Toutefois, cela va alors à l'encontre de l'option : allow_free_text , qui modifie par défaut le texte dès que la zone de texte perd le focus si le texte à l'intérieur n'est pas un "valide". élément de la liste. Je devais donc désactiver cette option également en passant : allow_free_text = > true dans le hachage des options (encore une fois, le premier hachage). Je préférerais vraiment que ça reste.

Mon appel actuel pour créer l'auto-compléteur est le suivant:

<%= 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'}) %>

Et le produits / index.js.erb est:

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

Answer 2

J'ai roulé le mien. Le processus est un peu compliqué, mais ...

Je viens de créer un text_field sur le formulaire avec un observateur. Lorsque vous commencez à taper dans le champ de texte, l'observateur envoie la chaîne de recherche et le contrôleur renvoie une liste d'objets (10 au maximum).

Les objets sont ensuite envoyés au rendu via un partiel qui complète les résultats de la recherche de complétion dynamique. Le partiel remplit en réalité les lignes link_to_remote qui sont retransmises au contrôleur. Link_to_remote envoie l'identifiant de la sélection utilisateur, puis un certain RJS nettoie la recherche, complète le nom dans le champ de texte, puis place l'identifiant sélectionné dans un champ de formulaire masqué.

Ouf ... Je ne pouvais pas trouver de plug-in pour le faire à ce moment-là, alors j'ai lancé le mien, j'espère que tout cela a un sens.