前端-text输入框是下拉菜单切能自动匹配

一个真心很好使的前端案例，一个输入框，里边是下拉菜单，可以根据你输入的值自动匹配

是看了下边的帖子深受启发：

http://www.runoob.com/try/try.php?filename=tryhtml5_datalist

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>

</body>
</html>

时间： 2024-08-05 15:00:51

前端-text输入框是下拉菜单切能自动匹配的相关文章

web前端html实例-select下拉菜单美化代码

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.

文本输入框和下拉菜单特效-首字母或全部字母大写

—————————————————————————— <script type="text/javascript">                        //格式校验            function validateInput(){                //获得文本框的DOM                var myText1 = document.getElementById("myText1");            

文本输入框和下拉菜单特效-用正则表达式验证E-mail格式

———————————————————————————— <script type="text/javascript">                        //格式校验            function validateInput(){                //获得文本框的DOM                var myText = document.getElementById("myText");            

文本输入框和下拉菜单特效-判断汉字的个数

————————————————————————— <script type="text/javascript">                        //进行格式校验            function sumInput(){                //获得文本框的DOM                var myText = document.getElementById("myText");                va

Bootstrap入门（八）组件2：下拉菜单

先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link href="css/bootstrap.min.css" rel="stylesheet">  <script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script

WEB前端：02_Menu下拉菜单

menu下拉菜单 网站常用效果之一以下为简化版,用于学习javascript基础知识. 效果图: menu下拉菜单 - 纯JS简化版 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 6

web前端 HTML 下拉菜单的跳转

以下例子的主要功能是:下拉菜单的选项选择后跳转到相应的页面. 1)代码示例: <select onchange="window.location=this.value;"> <option value="" selected>请选择</option> //这是菜单中的第一个选项 <option value="http://baidu.com">百度</option> //这是菜单中的第二

Bootstrap历练实例：标签页内的下拉菜单

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:标签页内的下拉菜单</title> <meta charset="utf-8" /> <meta name="vie

Bootstrap历练实例：下拉菜单插件方法的使用

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:下拉菜单插件方法的使用</title> <meta charset="utf-8" /> <meta name="v