Gaya saya, mari pertama kali memperkenalkan rendering. Jika Anda merasa itu cukup bagus, silakan merujuk ke kode implementasi.
Jangan bicara omong kosong dan melihat hierarki div terlebih dahulu
<!-Div terluar dapat ditentukan kapan saja untuk mendefinisikan lebar elemen anak-> <v> <!-Form Label Tambah permintaan teks-> <label untuk = ""> Pencarian Teks Lengkap </Label> <!-Beberapa pilihan untuk meng-host div secara dinamis di masa depan-> <Div> <!-Formulir elemen digunakan untuk mengikat peristiwa yang mendengarkan dan dalam input di masa mendatang, bentang di masa depan, BANYAK DINETER, Dinamen akan digunakan untuk mengikat peristiwa yang mendengarkan dan masuk ke dalam input, "FICKLEY, Dinams di Future, FOTORD-<! name = "Hint-Search" value = "" placeholder = "Pilih kata kunci atau tekan tab atau masukkan untuk membagi kata kunci"> </div> <!-Sertakan kolom daftar drop-down-> <div> <!-Tambahkan Li secara dinamis sesuai dengan paket data JSON-> <ul> </ul> </div>
Anotasi struktur DOM dapat dijelaskan dengan jelas, mari kita lihat CSS
* {box-sizing: boord-box;}. Hint-input-span-container {lebar: 100%; latar belakang-warna: #ffff; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba (0, 0, 0, 0, 0,075); display: tampilan: padding; 2px: 2px: 2px: 2px: 2px: 2px; 1px; max-width: 100%; garis-line-height: 30px;}. Hint-input-span-container .tag {padding: -2px; font-size: 12px; font-family: serif ;; margin-right: 2px; margin-top: 2px; margin-botin-botin: 2px; 10px;padding: 4px 6px;border: none;text-shadow: none;border-radius: 3px;font-weight: 200;}.label-primary {background: #2693FF;color: white;}.hint-input-span-container span i[data-role='remove'] {cursor: pointer;}.tag {margin-right: 2px;color: white;}. Tag [data-role = "lepas"] {margin-left: 2px; kursor: pointer;} input [name = 'hint-search'] {border: none; box-shadow: tidak ada; garis besar: tidak ada; latar belakang: transparan; padding: 0; margin: 0; lebar: 100%max-widor: transparent; padding: 0; margin: 0; lebar: 100%; max-wid-wdsth: transparent; padding: 0; margin: 0; width: 100%; max-wdring: transparent; padding: 0; margin: 0; width: 100%; max-wdring: transparent; padding: 0; margin: 0; width: 100%; Max-wd-wdsth: heTit. 100px; max-height: 120px; latar belakang-color: #ffff; overflow: auto; display: none; z-index: 9999;}. Hint-ul {teks-dekorasi: none; list-style-type: none; padding-left: 5px;}. Hint-ul li {font-size: padding-left: 5px;}. Hint-ul li {font-size: 14px; li: hover {latar belakang-warna: #eee;}Penting untuk mengatur ukuran perbatasan: kotak perbatasan di CSS. Properti ini dapat membuat bantalan dan komputasi perbatasan dengan lebar
.pasin-input-hancur-kontainer juga penting untuk mengatur tampilan ke blok inline, ada daftar tag
.Hint-block set Z-index ke 9999 untuk memastikan tampilan di ujung depan, dan posisinya mutlak untuk memastikan posisinya
Semua yang lain dapat disesuaikan sesuai dengan kebutuhan Anda
Mari kita lihat kode JS di bawah ini
$ (function () {// JSON Paket data var data = {data: ["123", "Hello Beijing", "Beijing Welcome", "Beijing Good", "Ocean", "Ocean Guangli Bureau", "I Ocean", "I Was Soard", "I Lalala", "I Can't Be Foat It", "I Ocean", "I Was Sourd", "I Lalala", "I Can't Being It", "I Ocean", "I Were Shading", "I Lalala", "I Can't Been It", "I Ocean", "I Were Shad" Gunung "," Ethiopia "," Ibaka "," Bibi "]}; // Dapatkan objek DOM yang perlu dipanggil beberapa kali kemudian var $ hintsearch = $ (" input [name = 'hint-e-earch'] "); var $ hintsearchcontainer = $ (". $ (". Hint-ul"); // Tambahkan Kamus AddDictionary (data.data, addullistener); // Setel daftar kamus sethintsearchContainerWidth (); // Menerapkan mendengarkan responsif untuk mengubah ukuran $ (window) .Bind ('Ubah Ulang', setHintSearchCearchcoarchcidth); fokus $ hintsearch.focus (function () {animtedown ();}); // lost focus // atur keterlambatan untuk mendengarkan klik respons $ hintsearch.blur (function () {setTimeout (function () {animateup ();}, 200);}); // tab dan enter event () {sumpah ();}; dicegah dari busa dan switching fokus $ hintsearch.keydown (function (e) {switch (e.shech) {case 9: case 13: {var text = $ hintsearch.val (); if (! $. trim (teks)) {$ hintsearch.val (""); e.preventdefault (); return;}}}} (e.preventdefault (); return; {ifeSeare); {$ hintsearch.before ('<span>' + text + '<i Data-role = "Remove"> </i> <i> </i> </i> </span> '); addSpanListenr ();} // console.log ($ hintsearch.val ()); $ hintsearch.val (""); $ hintsearch.focus (); e.preventdefauld () (); $ bintsearch.focus (); e.preventdefauld (); Pairing // Cocokkan konten input di LI jika string disertakan, dapat ditemukan dan dikembalikan // Metode pencarian dapat dimodifikasi dengan sendirinya. Data.data.filter (function (x) {return x.indexof (teks)! = -1;}) if (tmparr.length === 0) {tmparr.push ("tidak ada entri yang cocok");} Data -calledtionary (TMParr, addullistener); function function) // function for libary (addullistener); function function for functiony (TMPARR TMPARR); {for(var i = 0; i < dataarr.length; i++) {$hintUl.append('<li>'+ dataarr[i] +'</li>');}callback();}//Update search content function updateDictionary(dataarr,callback) {$hintUl.empty();addDictionary(dataarr,callback);}//Swipe down animation//Encapsulate change style border function animtedown () {$ hintblock.slidedown ('fast'). css ({'border': '1px solid #96c8da', 'border-top': '0px', 'box-shadow': '0 2px 3px 0 RGBA (34,36,38, .15) '}); $ hintsearchcontainer.css ({' border ':' 1px solid #96c8da ',' border-bottom ':' 0px ',' box-shadow ':' 0 2px 3px 0 rgba (34,34,36 (34,36 (34,36, '0 2px 3px 0 RGBA (34,34,36 (34,36 (34,36 (34,36) oPx (34,36 (34,36) oPx (34,36, function animateup () {$ hintblock.slideup ('fast', function () {$ hintsearchContainer.css ({'border': '1px solid #ccc'});});});} // periksa apakah itu diulangi dengan fungsi input input input {TEKS) {TEKS) {TEKS) {TEKS) {TEKS) {TEKS) {TEKS (TEKS). span "). masing -masing (fungsi () {if ($ .trim (teks) == $ .trim ($ (this) .text ())) {flag = 1; return;}}); return flag? true: false;} // atur petunjuk-input-span-container fungsi lebar setHintSearchContainerWidth () {var hint_width = $ hintsearchContainer.width () + 2 * parseint ($ hintsearchcontainer.css ('padding-left'). ParseInt ($ HintSearchContainer.css ('border-left'). Match (/[0-9]+/) [0]); $ hintblock.css ({'width': hint_width});} // bind klik fungsi event addullistener () {$ hintul.delegate (lIge ', lIge', ') {$ hintul. $ (this) .text (); if (! checkContainHas (teks)) {$ hintsearch.before ('<span>' + text + '<i data = "ramping"> </i> <i> </i> </i> </pan>'); addSpanListenr ();} $ plave. " Fungsi Acara AddSpanListenr () {$ (". Hint-input-span-container span"). Delegate ("i", 'click', function () {$ (this) .parent (). Remove ();})}}))Fokusnya adalah mendengarkan acara dan mengoperasikan elemen DOM, yang tergantung pada jQuery.
Di atas adalah metode implementasi pull-down input-ganda dari komponen UI yang diperkenalkan kepada Anda oleh editor (dengan fungsi pencarian). Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!