网页中文本框下拉选择输入与自动提示功能的实现

           在网页设计中我们经常需要用户进行输入操作,下面我分享两种用户的输入功能。

       1.输入框自动提示

        浏览网页的时候我们经常会遇到输入框内我们输入前几个字,输入框就会出现下拉提示你可能要输入的完整信息。如下:

            

要实现着这种功能可以使用datalist属性就行。具体实现代码为:

 
            
                 
只要input中list属性等于datalist的id多久可以了,option中就是就是完整信息。

        2.文本输入框下拉选择输入

        就是点击输入框出现下拉菜单,用户只能从菜单中选择输入。

        大家都知道标签是可以做选择的,那么如何与输入框结合起来呢?

        我的想法是刚开始就把文本输入框和selsec选择框并排放好,其中select选择框的display设为none这样的话选择框一开始是看不见的,当文本框聚焦后,触发js事件使得文本框display值为none,输入框的display值为block这样用户就可以选择输入了

        具体实现代码: 

   






你可能感兴趣的:(网页(html,php,js))