في Rails، ما هي أفضل طريقة للحصول على الإكمال التلقائي الذي يعرض الأسماء ولكن يستخدم المعرفات؟

Question

أريد الحصول على مربع نص يمكن للمستخدم الكتابة فيه ويعرض قائمة مملوءة بـ Ajax بأسماء النموذج الخاص بي، وبعد ذلك عندما يحدد المستخدم واحدًا، أريد أن يقوم HTML بحفظ معرف النموذج واستخدامه عند إرسال النموذج .

لقد كنت أبحث في المكون الإضافي للإكمال التلقائي الذي تم حذفه في Rails 2، ولكن يبدو أنه ليس لدي أي فكرة عن أن هذا قد يكون مفيدًا.هناك حلقة السكك الحديدية يغطي استخدام هذا البرنامج المساعد، لكنه لا يتطرق إلى هذا الموضوع.التعليقات أشير إلى أنه يمكن أن يكون مشكلة, ، و يشير إلى model_auto_completer كحل ممكن, ، والذي يبدو أنه يعمل إذا كانت العناصر المعروضة عبارة عن سلاسل بسيطة، ولكن النص المدرج يتضمن الكثير من المسافات غير المرغوب فيها إذا قمت (كما أود أن أفعل) بتضمين صورة في عناصر القائمة، على الرغم مما تقوله الوثائق.

ربما يمكنني الاختراق model_auto_completer في حالة جيدة، وقد ينتهي بي الأمر إلى القيام بذلك، لكنني متشوق لمعرفة ما إذا كانت هناك خيارات أفضل هناك.

Answer 1

لقد حصلت على إصلاح مبتذل للمساحات غير المرغوب فيها من الصورة.أضفت أ :after_update_element => "trimSelectedItem" إلى خيارات التجزئة model_auto_completer (هذا هو التجزئة الأولى من الثلاثة المذكورة).لي trimSelectedItem ثم يبحث عن العنصر الفرعي المناسب ويستخدم محتوياته لقيمة العنصر:

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
}

ومع ذلك، فإن هذا يتعارض بعد ذلك مع :allow_free_text الخيار، الذي يقوم افتراضيًا بتغيير النص مرة أخرى بمجرد أن يفقد مربع النص التركيز إذا لم يكن النص الموجود بداخله عنصرًا "صالحًا" من القائمة.لذلك اضطررت إلى إيقاف ذلك أيضًا عن طريق المرور :allow_free_text => true في تجزئة الخيارات (مرة أخرى، التجزئة الأولى).أنا أفضل حقًا أن يظل كذلك.

لذا فإن مكالمتي الحالية لإنشاء أداة الإكمال التلقائي هي:

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

والمنتجات/index.js.erb هي:

 <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

لقد تدحرجت بنفسي.العملية معقدة بعض الشيء، ولكن...

لقد قمت للتو بإنشاء حقل نصي في النموذج مع أحد المراقبين.عندما تبدأ الكتابة في حقل النص، يرسل المراقب سلسلة البحث وتقوم وحدة التحكم بإرجاع قائمة بالكائنات (بحد أقصى 10).

يتم بعد ذلك إرسال الكائنات للعرض عبر جزء يملأ نتائج بحث الإكمال التلقائي الديناميكي.يقوم الجزء الجزئي فعليًا بملء خطوط link_to_remote التي يتم إرسالها مرة أخرى إلى وحدة التحكم مرة أخرى.يرسل link_to_remote المعرف الخاص باختيار المستخدم ثم يقوم بعض RJS بتنظيف البحث، ويملأ الاسم في حقل النص، ثم يضع المعرف المحدد في حقل نموذج مخفي.

أوه...لم أتمكن من العثور على مكون إضافي للقيام بذلك في ذلك الوقت، لذلك قمت بإنشاء مكون إضافي خاص بي، وآمل أن يكون كل ذلك منطقيًا.