في Rails، ما هي أفضل طريقة للحصول على الإكمال التلقائي الذي يعرض الأسماء ولكن يستخدم المعرفات؟
-
09-06-2019 - |
سؤال
أريد الحصول على مربع نص يمكن للمستخدم الكتابة فيه ويعرض قائمة مملوءة بـ Ajax بأسماء النموذج الخاص بي، وبعد ذلك عندما يحدد المستخدم واحدًا، أريد أن يقوم HTML بحفظ معرف النموذج واستخدامه عند إرسال النموذج .
لقد كنت أبحث في المكون الإضافي للإكمال التلقائي الذي تم حذفه في Rails 2، ولكن يبدو أنه ليس لدي أي فكرة عن أن هذا قد يكون مفيدًا.هناك حلقة السكك الحديدية يغطي استخدام هذا البرنامج المساعد، لكنه لا يتطرق إلى هذا الموضوع.التعليقات أشير إلى أنه يمكن أن يكون مشكلة, ، و يشير إلى model_auto_completer
كحل ممكن, ، والذي يبدو أنه يعمل إذا كانت العناصر المعروضة عبارة عن سلاسل بسيطة، ولكن النص المدرج يتضمن الكثير من المسافات غير المرغوب فيها إذا قمت (كما أود أن أفعل) بتضمين صورة في عناصر القائمة، على الرغم مما تقوله الوثائق.
ربما يمكنني الاختراق model_auto_completer
في حالة جيدة، وقد ينتهي بي الأمر إلى القيام بذلك، لكنني متشوق لمعرفة ما إذا كانت هناك خيارات أفضل هناك.
المحلول 2
لقد حصلت على إصلاح مبتذل للمساحات غير المرغوب فيها من الصورة.أضفت أ :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>
نصائح أخرى
لقد تدحرجت بنفسي.العملية معقدة بعض الشيء، ولكن...
لقد قمت للتو بإنشاء حقل نصي في النموذج مع أحد المراقبين.عندما تبدأ الكتابة في حقل النص، يرسل المراقب سلسلة البحث وتقوم وحدة التحكم بإرجاع قائمة بالكائنات (بحد أقصى 10).
يتم بعد ذلك إرسال الكائنات للعرض عبر جزء يملأ نتائج بحث الإكمال التلقائي الديناميكي.يقوم الجزء الجزئي فعليًا بملء خطوط link_to_remote التي يتم إرسالها مرة أخرى إلى وحدة التحكم مرة أخرى.يرسل link_to_remote المعرف الخاص باختيار المستخدم ثم يقوم بعض RJS بتنظيف البحث، ويملأ الاسم في حقل النص، ثم يضع المعرف المحدد في حقل نموذج مخفي.
أوه...لم أتمكن من العثور على مكون إضافي للقيام بذلك في ذلك الوقت، لذلك قمت بإنشاء مكون إضافي خاص بي، وآمل أن يكون كل ذلك منطقيًا.