مسج الإكمال التلقائي للمدخلات ، Textpattern الفئة القائمة كمصدر

Question

أنا باستخدام Textpattern CMS لبناء موقع للنقاش-- لقد فهم راسخ من XHTML و CSS ، وكذلك Textpattern قالب اللغة ، ولكن PHP و جافا سكريبت قليلا خارج بلدي الماكرة.

على شكل مدخلات أن تبدأ موضوع جديد المستخدمين تحتاج إلى تحديد فئة من قائمة تضم أكثر من 5,000 الخيارات.باستخدام HTML select-نوع input العنصر هو غير عملي جدا, لكنه يعمل.أود أن استخدام نوع من جافا سكريبت السحر عرض text-نوع عنصر المدخلات من شأنها أن قراءة مدخلات المستخدم ، عرض المباريات أو الإكمال التلقائي من الفئات المتاحة, مرورا المطلوبة الخيار value في المناسبة حقل قاعدة البيانات.

لقد رأيت العديد من الإكمال التلقائي الإضافات مسج, ولكن التعليمات تفترض أن تفهم كيف جافا سكريبت يعمل.

كما ذكرت أعلاه, فإنه من السهل بالنسبة لي أن تولد فئة قائمة select-نوع input عنصر لا يمكن إخفاء هذا العنصر باستخدام CSS.هل من الممكن التحكم اختر قائمة الإدخال باستخدام الإكمال التلقائي آلية في text-إدخال نوع العنصر ؟ كيف لي أن أفعل ذلك ؟

Answer 1

يمكنك إعداد الإكمال التلقائي على البيانات من عنوان ، حتى أستطيع أن أرى هذا يجري استخدامها في بضع أنيق الطرق مع Textpattern.

مجموعة شكل الإكمال التلقائي يستخدم يبدو مثل هذا:

["example_one", "example_two", ... ]

منذ لديك 5000+ العناصر ، قد ترغب في إنشاء صفحة يسرد ببساطة لهم باستخدام هذا الشكل:

Page Autocomplete:
[
    <txp:article_custom form="array_form" ... />
]

Form array_form:
"<txp:title />",

استخدام هذه الصفحة بدلا من بما في ذلك جميع العناصر في تحديد مجال لكنت إعداد الإكمال التلقائي مع:

$("#example").autocomplete("<txp:link_to_home />Autocomplete");

يمكنك استخدام البرنامج المساعد التخزين المؤقت لتسريع التحميل.

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

Answer 2

تحرير :تحديث إلى وضع الخيار.القيمة في حقل مخفي

نعم كان ذلك ممكنا.على سبيل المثال, إذا كان لديك الكود التالي :

<input type="text" id="myTextBoxId"></input>
<!-- added hidden field to store selection option value -->
<input type="hidden" id="myHiddenField" name="selectedCategory"></input>
<select id="mySelectId" style="display: none">
    <option>Category 1</option>
    <option>Category 2</option>
    <option>...</option>
</select>

يمكنك استخدام التالية مسج كود وضع هذه البيانات في مجموعة :

var categories = $.map($("#mySelectId option"), function(e, i)
{
    return e; // Updated, return the full option instead its text
});

و أخيرا يمكنك استخدام الإكمال التلقائي المساعد مثل هذا واحد :

$("#myTextBoxId").autocomplete(categories,
{
    formatItem : function(item) { return item.text; } // Added
});

التحقق الإكمال التلقائي المساعد صفحة التجريبي لمعرفة ما خيارات يمكنك استخدام (مثل الملء التلقائي و mustMatch).

كل ما عليك القيام به هو وضع هذا في رأس html (مسج js, الإكمال التلقائي css & js كود الصفحة الخاصة بك) :

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js">
</script>
<script type="text/javascript">
    $(function()
    {
        // Updated script
        var categories = $.map($("#mySelectId option"),
            function(e, i) { return e; });
        $("#myTextBoxId").autocomplete(categories,
        {
            formatItem : function(item) { return item.text; }
        });
        // Added to fill hidden field with option value
        $("#myTextBoxId").result(function(event, item, formatted)
        {
            $("#myHiddenField").val(item.value);
        }
    });
</script>

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

بالطبع لم أكن اختبار, فقط ضع تعليقا إذا كان لديك سؤال.تحرير :لم الاختبار ، ولكن ليس مع 5k العناصر في بلدي select ;)