قم بتنفيذ إكمال النموذج التلقائي للإكمال التلقائي بناءً على مكون الإضافات

استنادًا إلى المكون الإضافي bootstrap ، فإن الإكمال التلقائي يكمل النماذج تلقائيًا ، ويوفر رمز البرنامج النصي وحالات الاستخدام وخادم الخلفية (PHP). هناك بعض الأشياء التي لم يتم شرحها بوضوح في النص الأصلي ، وآمل أن تساعد الجميع.

بادئ ذي بدء ، يجب أن أقوم بتحميل bootstrap & jQuery. تجدر الإشارة إلى أن الصفيف ثنائي الأبعاد يتم إرجاعه بواسطة الواجهة الخلفية يتسق مع المكالمة أدناه طريقة التنسيق ؛

بالإضافة إلى ذلك ، يجب أن تكون البيانات التي تم إرجاعها parsejson أولاً! يتذكر.

وصف المعلمة ذات الصلة:

المصدر: وظيفة (استعلام ، العملية) {}. يمثل الاستعلام السلسلة في مربع إدخال النص الحالي. في هذه الطريقة ، يمكن طلب البيانات من الخلفية (كائن JSON في شكل صفيف) من خلال AJAX ، ثم يتم استخدام الكائن الذي تم إرجاعه كمعلمة للعملية ؛

formatiTem: function (item) {}. يتم تحويل كائن JSON المحدد الذي يقوم بإرجاع البيانات إلى تنسيق سلسلة ، والذي يتم استخدامه لعرضه في قائمة المطالبات ، وقيمة الإرجاع هي: String ؛

setValue: function (item) {}. عند تحديد عنصر في قائمة المطالبات ، قم بتعيين القيمة المعروضة في مربع إدخال النص والقيمة التي يجب الحصول عليها فعليًا. تنسيق قيمة الإرجاع: {'قيمة البيانات': العنصر ["خاصية العنصر من القيمة المعروضة في مربع الإدخال"] ، "القيمة الحقيقية": العنصر ["خاصية العنصر من القيمة الفعلية التي يجب الحصول عليها"] ، في وقت لاحق ، يمكن الحصول على هذه القيمة من خلال خاصية القيمة الحقيقية لصندوق إدخال النص ؛

العناصر: الحد الأقصى لعدد مجموعات النتائج لمطالبات الإكمال التلقائي ، الافتراضي: 8 ؛

Minlength: سيتم تنفيذ عملية المطابقة فقط عندما تصل السلسلة في مربع إدخال النص الحالي إلى قيمة الخاصية. الافتراضي: 1 ؛

التأخير: بعد تحديد عدد التأخير المللي ثانية ، سيتم طلب البيانات من الخلفية لمنع الطلبات المتكررة من الخلفية من أن تكون ناتجة بشكل متكرر بسبب الإدخال السريع. الافتراضي: 500

استنادًا إلى المكون الإضافي bootstrap ، اكتمال الإكمال التلقائي تلقائيًا ، يكون الرمز كما يلي

1. الكود

 <script> $ ('#sim_iccid'). الإكمال التلقائي ({المصدر: الدالة (الاستعلام ، العملية) {var matchcount = this.options.items ؛ // الحد الأقصى لعدد مجموعات النتائج المسموح به هو $ .ge ("http://www.soyiyuan.com/update/" ، {"iccid": Query ، "MatchCount": matchcount} ، function (respdata) العنصر ["ICCID"]+"(+عنصر [" mobile "]+") ؛

2. بيانات $ هي صفيف ثنائي الأبعاد

echo json_encode (بيانات $)

3. تنسيق JSON القياسي الذي يجب إرجاعه

[رمز] [{"iccid": "12345678901234567890" ، "Mobile": "1850000"} ، {"ICCID": "12345785" ، "Mobile": "1850001}] [Code]

يتم تحويل التحكم التلقائي في الإكمال التلقائي في Bootstrap استنادًا إلى TypeAhead الخاص بـ Bootstrap ، لأن TypeAhead لا يدعم الكائنات المعقدة.

 . Process (Respdata) ؛ {"قيمة البيانات": البند ["regionName"] ، "القيمة الحقيقية": البند ["regitcode"]} ؛ $ ("#gbbtn"). انقر فوق (function () {// احصل على القيمة الفعلية لمربع النص var regionCode = $ ("#completeinput"). attr ("القيمة الحقيقية") ||

إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:

Bootstrap التعلم البرنامج التعليمي

Bootstrap البرنامج التعليمي العملي

تعليمي استخدام المكونات الإضافية Bootstrap

ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.