Masukan jenis kotak kombo html

Komponen ini dikembangkan untuk mengatasi masalah saat kita harus menggunakan kotak teks sambil memberikan opsi yang telah ditentukan sebelumnya pada formulir

Menggunakan kode

Triknya adalah menggabungkan kombo yang dibuat dengan daftar "ul" dengan kotak teks, menggunakan CSS untuk menyesuaikannya dan sedikit JavaScript untuk melakukan pekerjaan lainnya

HTML

HTML

    

        
            
                
                
                    Honda
                    Mazda
                    Nissan
                    Toyota
                
            
            new comboBox['carBrand'];
        

    

CSS

CSS

    

        .container {
            padding: 50px;
        }
             
        *:focus {
            outline: none;
        }

        .comboBox {
            width: 400px;
        }

        .comboGroup {
            position: relative;
            width: 100%;
            text-align: left;
        }

            .comboGroup * {
                font-family: arial, helvetica, sans-serif;
                font-size: 14px;
            }

            .comboGroup input {
                padding: 8px;
                margin: 0;
                border: 1px solid #ccc;
                border-radius: 4px;
                width: 100%;
                background-color: #fff;
                z-index: 0;
            }

            .comboGroup ul {
                padding: 8px 20px 8px 8px;
                margin: 0;
                border: 1px solid #ccc;
                border-radius: 4px;
                width: 100%;
                background-color: #fefefe;
                z-index: 1;
                position: absolute;
                top: 40px;
                display: none;
            }

            .comboGroup li {
                padding: 6px;
                margin: 0;
                border-radius: 4px;
                width: 100%;
                display: block;
            }

                .comboGroup li:hover {
                    cursor: pointer;
                    background-color: #f5f5f5;
                }

    

Javascript

JavaScript

    

        function comboBox[id] {
            var box = this;
            box.txt = document.getElementById[id];
            box.hasfocus = false;
            box.opt = -1;
            box.ul = box.txt.nextSibling;
            while [box.ul.nodeType == 3] box.ul = box.ul.nextSibling;
            box.ul.onmouseover = function [] {
                box.ul.className = '';
            };
            box.ul.onmouseout = function [] {
                box.ul.className = 'focused';
                if [!box.hasfocus] box.ul.style.display = 'none';
            };
            box.list = box.ul.getElementsByTagName['li'];
            for [var i = box.list.length - 1; i >= 0; i--] {
                box.list[i]. title = function [] {
                    box.txt.value = this.firstChild.data;
                }
            }
            box.txt.onfocus = function [] {
                box.ul.style.display = 'block';
                box.ul.className = 'focused';
                box.hasfocus = true;
                box.opt = -1;
            };
            box.txt.onblur = function [] {
                box.ul.className = '';
                box.hasfocus = false;
            };
            box.txt.onkeyup = function [e] {
                box.ul.style.display = 'none';
                var k = [e] ? e.keyCode : event.keyCode;
                if [k == 40 || k == 13] {
                    if [box.opt == box.list.length - 1] {
                        box.opt = -1;
                    }
                    box.txt.value = box.list[++box.opt].firstChild.data;
                } else if [k == 38 && box.opt > 0] {
                    box.txt.value = box.list[--box.opt].firstChild.data;
                }
                return false;
            };
            box.ul. title = function [e] {
                box.ul.style.display = 'none';
                return false;
            };
        }

    

Tempat Menarik

Sangat mudah untuk menggunakan komponen ke bentuk HTML apa pun. Tidak ada dependensi Bootstrap atau jQuery

Sejarah

Belum ada pembaruan

Lisensi

Artikel ini, bersama dengan kode sumber dan file terkait, dilisensikan di bawah The Code Project Open License [CPOL]

Bagaimana Anda menyisipkan kotak kombo di HTML?

Apa itu kotak kombo elemen HTML?

Bisakah input memiliki banyak tipe dalam HTML?

Bagaimana cara menambahkan dropdown ke kolom input?