带有可选选项的输入文本框(组合框)

现在下载ComboBox.zip !

介绍

开发该组件是为了解决在表单上提供预定义选项时必须使用文本框的问题。

使用的代码

诀窍是加入一个由一个“ul”列表和一个文本框构建的组合，使用CSS来适应它们，并使用一些JavaScript来完成剩下的工作。

HTML:

隐藏,复制代码

    <divclass="container">

        <divclass="comboBox">
            <divclass="comboGroup">
                <inputtype="text"id="carBrand"placeholder="Select or type a new option..."/>
                <ul>
                    <li>Honda</li>
                    <li>Mazda</li>
                    <li>Nissan</li>
                    <li>Toyota</li>
                </ul>
            </div>
            <script>new comboBox('carBrand');</script>
        </div>

    </div>

CSS:

隐藏,缩小 ,复制代码