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

原创 2015年11月21日 16:12:48

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

       1.输入框自动提示

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

            

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

<span style="font-size:14px;"> <input type="text" class="form-control"  aria-describedby="basic-addon1" list="category">
          <datalist id="category">  
               <option value="绳编">
               <option value="纸艺">
               <option value="木工">
          </datalist>  </span>
只要input中list属性等于datalist的id多久可以了,option中就是就是完整信息。

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

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

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

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

        具体实现代码: 

<input type="text" name="t" id="t"  onFocus="showSelect();" style=" width:180px; height:30px">   
<select name="sel" id="sel" style="display:none; width:180px;height:30px">
<option value="0">c++面向对象程序设计</option>
<option value="1">数据结构</option>
<option value="2">C语言</option>
<option value="3">JAVA语言</option>
</select>
<script type="text/javascript">
function showSelect(){
	var _t = document.getElementById('t');
	var _s = document.getElementById('sel');
	if( _t.style.display == ''){
		_t.style.display = 'none';
	}
	else{
		_t.style.display = '';
	}
   if ( _s.style.display == 'none' ){
		_s.style.display = '';
	}
	else{
		_s.style.display = 'none';
	}
}
</script>





版权声明:本文为博主原创文章,未经博主允许不得转载。

Java中next()和nextLine()区别及用法

今天在项目之余,到杭电上刷了一道题,那道题是1062题,程序本身不是难,但是在里面实现过程中,突然发现用的Scanner类进行输入的,用到了next和nextLine这两个方法,在输入过程中也遇到一些...

文本框自动下拉选择提示

文本下拉选择提示

用原生HTML5控件实现输入框自动提示(下拉列表补全)功能

转自:http://www.cnblogs.com/Chen-XiaoJun/articles/5839335.html 元素介绍 想象一下我们想要用户输入一个字符串,例如他们的名字,我们...
  • zgrkaka
  • zgrkaka
  • 2017年06月05日 16:00
  • 2625

自定义控件 实现文本框输入模仿下拉框选择功能

1:引用JQuery类库 2:引用autoComplete.js类简单Demo 1:前端代码

ASP.NET输入文本框自动提示功能

在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索。我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询。那么在ASP.NET中,如果我们需要...

文本框(Textbox)和下拉框(Combobox)自动联想功能的实现

怎样使自己程序中的文本框或下拉框具有像百度和Google那样的自动联想功能?微软的TextBox和Combobox控件为我们提供了简便方法。 首先需要学习TextBox(或Combobox)的两个属性...

文本框(Textbox)和下拉框(Combobox)自动联想功能的实现

怎样使自己程序中的文本框或下拉框具有像百度和Google那样的自动联想功能?微软的TextBox和Combobox控件为我们提供了简便方法。 首先需要学习TextBox(或Combobox)的两个属...
  • dxd0128
  • dxd0128
  • 2013年08月15日 09:49
  • 1408

java web在不使用任何插件情况下实现文本框输入自动补全功能

word.html suggest: 可以尝试输入大写字母"A、B、T"将有提示...

Android—高级控件(一)自动完成文本框,下拉列表

一、自动完成文本框              自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上它也是一个文本编辑框,但它比普通编辑框多了一个功能;当用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页中文本框下拉选择输入与自动提示功能的实现
举报原因:
原因补充:

(最多只允许输入30个字)