إدخال مكون واجهة المستخدم طريقة التنفيذ المتعددة المنسدلة (مع وظيفة البحث)

أسلوبي ، دعنا أولاً نقدم العروض. إذا كنت تشعر أنه جيد جدًا ، فيرجى الرجوع إلى رمز التنفيذ.

دعونا لا نتحدث هراء وننظر إلى التسلسل الهرمي ديف أولا

 <!-يمكن تحديد Div الخارجي في أي وقت لتحديد عرض العنصر الطفل-> <div> <!-تسمية النموذج إضافة مطالبات نصية-> <label for = "" name = "hint-search" value = "" placeholder = "" حدد الكلمات الرئيسية أو اضغط على علامة التبويب أو أدخل إلى تقسيم الكلمات الرئيسية "> </div> <!-قم بتضمين أعمدة القائمة المنسدلة-> <viv> <!-أضف بشكل ديناميكي LI وفقًا لحزم بيانات JSON-> <ul> </ul> </ulf>

يمكن شرح شرح بنية DOM بوضوح ، دعونا نلقي نظرة على CSS

 * {box-size: border-box ؛}. الأوسط ؛ الحدود الحدودية: 1px ؛ الحد الأقصى-width: 100 ٪ ؛ خطي الخط: 30px ؛}. {font-size: 10px ؛ padding: 4px 6px ؛ الحدود: لا شيء ؛ نص text: none ؛ border-radius: 3px ؛ font-weight: 200 ؛}. label-primary {background: #2693ff ؛ color: white ؛}. 2px ؛ اللون: أبيض ؛}. العلامة [data-role = "remove"] {margin-left: 2px ؛ المؤشر: pointer ؛} إدخال [name = 'hint-search'] {الحدود: لا شيء ؛ box-shadow: none ؛ الخطوط العريضة: none ؛ خلفية اللون: trapparent ؛ padding: 0 ؛ hargin: 100 ٪ ؛ المطلق ؛ العرض: 100px ؛ الحد الأقصى-الهراء: 120px ؛ خلفية اللون: #ffff ؛ فائض: تلقائي ؛ عرض: لا شيء ؛ z-index: 9999 ؛}. 4px ؛}.

من المهم ضبط حجم الحدود: صندوق الحدود في CSS. هذه الخاصية يمكن أن تجعل الحشو وحساب الحدود في العرض

.hint-input-span-container من المهم أيضًا تعيين العرض على كتلة مضمّنة ، هناك قائمة بالعلامات

.

يمكن ضبط جميع الآخرين وفقًا لاحتياجاتك

لنرى رمز JS أدناه

 $ (function () {// json data packet var data = {data: ["123" ، "Hello Beijing" ، "Beijing Welcome" ، "Beijing Good" ، "Ocean" ، "Ocean Guangli Bureau" ، "I Ocean" ، الجبل "،" إثيوبيا "،" ibaka "،" bibi "] $ (". FOCUS $ hintsearch.focus (function () {animtowown () ؛}) ؛ // فقدت التركيز // set تأخير من أجل الاستماع إلى النقر فوق استجابة $ hintsearch.blur (function () {setTimeOut (function () {enimateup () ؛} ، 200) ؛ ممنوع من الفقاعات والتبديل التركيز $ hintsearch.keydown (وظيفة (e) {switch ( {$ hintsearch.before ('<span>' + text + '<i Data-Role = "remove"> </i> <i> </i> </i> </span> ') ؛ addSpanListenr () ؛} // console.log ($ hintsearch.val () الاقتران // مطابقة محتوى الإدخال في LI إذا تم تضمين السلسلة ، يمكن العثور عليها وإعادتها // يمكن تعديل طريقة البحث بنفسها. data.data.filter (function (x) {return x.indexof (text)! = -1 ؛}) if (tmparr.length === 0) {tmparr.push ("لا يوجد إدخال مطابق") {for (var i = 0 ؛ i <dataArr.length ؛ i ++) {$ hintul.append ('<li>'+dataarr [i]+'</li>') ؛} callback () ؛} // تحديث محتوى محتوى البحث المحدث (DataArr ، callback) {$ hintul.empty () ؛ الدالة animtytown () {$ hintblock.slidedown ('fast'). RGBA (34،36،38 ، .15) '}) ؛ $ HintSearchContainer.css ({' Border ':' 1px Solid #96C8DA '،' Border-bottom ':' 0px '،' box-shadow ':' 0 2px 3px 0 rgba (34،36،38 ، الدالة enimateup () {$ hintblock.slideup ('fast' ، function () {$ hintsearchcontainer.css ({'border': '1px solid #ccc'}) ؛}) ؛} // span "). كل (function () {if ($ .trim (text) == $ .trim ($ (this) .text ())) {flag = 1 ؛ return ؛}}) ؛ علامة الإرجاع؟ TRUE: false ؛} // تعيين تلميح-إينتور-إينت-سنت-container وظيفة sethintSearchContainerWidth () {var hint_width = $ hintsearchcontainer.width () parseint ($ hintsearchcontainer.css ('border-left'). match (/[0-9]+/) [0]) ؛ $ hintblock.css ({'width': hint_width}) ؛} // bind انقر فوق وظيفة addullistener () {$ hintul.delegate ('li' $ (this) .text () ؛ if (! checkContainerHas (text)) {$ hintsearch.before ('<span>' + text + '<i data-role = "remove"> </i> <i> <i> </i> </i> </i> </i> </i span>') ؛ addSpanListenr () ؛ $} remearch.val ("") addSpanListenr () {$ (".

ينصب التركيز على الاستماع إلى الأحداث وتشغيل عناصر DOM ، والتي تعتمد على jQuery.

ما ورد أعلاه هو طريقة تنفيذ الإدخال المتعددة المنسدلة لمكون واجهة المستخدم المقدمة لك من قبل المحرر (مع وظيفة البحث). آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!