有一个需求  需要做一个input 框  点击出现列表

于是想到了  datalist控件

    <input type="text" list="itemlist" name="" class="search" >

             <datalist id="itemlist">

                   <option>常用001</option>

                   <option>item2</option>

                   <option>item3</option>

                   <option>item4</option>

                   <option>item5</option>

                   <option>item6</option>

             </datalist>

于是乎看了 张大神的文章

http://www.zhangxinxu.com/wordpress/2013/03/html5-datalist-%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8-%E5%8F%AF%E8%A1%8C%E6%80%A7/

学习了 怎么匹配到邮箱 但是   默认的灰色 边框去不掉 还是有很大局限性

于是只能看自己的了

代码 部分 ：实现传值 的问题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

<title>搜索框</title>
<style>
.input-box {
position: relative;
display: inline-block;
}

.input-box .input {
background-color: transparent;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
line-height: 1.42857;
padding: 6px 6px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 200px;
display: inline;
position: relative;
z-index: 1;
}

.tip-l {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #555;
display: inline-block;
right: 10px;
z-index: 0;
position: absolute;
top: 12px;
}

.dropdown {
position: absolute;
top: 32px;
left: 0px;
width: 212px;
background-color: #FFF;
border: 1px solid #23a8ce;
border-top: 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
z-index: 999;
padding: 0;
margin: 0;
}

.dropdown li {
display: block;
line-height: 1.42857;
padding: 0 6px;
min-height: 1.2em;
cursor: pointer;
}

.dropdown li:hover {
background-color: #23a8ce;
color: #FFF;
}
</style>

<!-- // <script src="../js/jquery-2.1.0.js"></script> -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>

<div class="input-box">
<input type="text" class="input" value="Holle Word" />
<span class="tip-l"></span>
<ul class="dropdown">
<li >Holle Word</li>
<li >这是一个测试</li>
<li >简单的dome</li>
</ul>
</div>

</body>

<script>

　var isBox = false; // 定义一个触发焦点事件的开关，默认为不开启状态 || 也可以给input设置一个属性，来判断
$(".dropdown").hide();

$(".input").focus(function () { // input绑定焦点事件，触发时打开焦点开关
$(this).siblings(".dropdown").show();
isBox = true;
});
$(".input-box").mousemove(function () { // 鼠标进入input-box区域内打开焦点开关
isBox = true;
});
$(".input-box").mouseout(function () { // 鼠标离开input-box区域内关闭焦点开关
isBox = false;
});

$(".input").blur(function () { // input失去焦点时通过焦点开关状态判断鼠标所在区域
if (isBox == true) return false;
$(this).siblings(".dropdown").hide();
});

$(".dropdown").find('li').each(function () { // 传值给input，同时关闭焦点开关
$(this).on("click", function () {
isBox = false;
var text = $(this).text();
$(this).parent().siblings(".input").val(text);

$(".dropdown").hide();

})
})

</script>
</html>



												


											
input 下拉框 的实践的更多相关文章
	

    
								
  1. Bootstrap modal模态框关闭时，combobox input下拉框仍然保留在页面上
		
    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
    
		
    2. 
						
  2. jquery input 下拉框(模拟select控件)焦点事件
		
    本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
    
		
    3. 
						
  3. input下拉框
		
    用Html5和css.js写的,引用的bootstrap和jquery文件请各位看客自己去下载
    
		
    4. 
						
  4. jquery div 下拉框焦点事件
		
    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
    
		
    5. 
						
  5. 用div，ul，input模拟select下拉框
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
    
		
    6. 
						
  6. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
		
    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...
    
		
    7. 
						
  7. 使用jquery-combobox实现select下拉框多选之后，如何将下拉框的值传给input隐藏域
		
    我在之前的一篇博文中eaeyui-combobox实现组合查询(即实现多个值得搜索)地址:http://www.cnblogs.com/dushan/p/4778897.html 实现了select下 ...
    
		
    8. 
						
  8. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
		
    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
    
		
    9. 
						
  9. jquery.editable-select 可编辑下拉框之获取select值和input值
		
    使用jquery.editable-select可以实现可编辑下拉框的功能,但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-sel ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ILSpy 反编译.NET
			
    ILSpy 是一个开源的.NET反编译工具,简洁强大易用是它的特征.在绝大多数情况下,它都能很好的完成你对未知程序集内部代码的探索.
    
			
    2. 
						
  2. unidac 6.0.1 与kbmmw 的一点小摩擦
			
    unidac 6.0.1  出来了,虽然支持sql server 直连等新特性,但是由于内部改动比较大, 导致与kmmmw 的集成起来存在有点小问题,就是如果数据库不是interbase 或者fire ...
    
			
    3. 
						
  3. 2018.09.08 NOIP模拟trip（最长链计数）
			
    差不多是原题啊. 求最长链变成了最长链计数,其余没有变化. 这一次考试为了保险起见本蒟蒻还是写了上次没写的辅助数组. 代码: #include<bits/stdc++.h> #define ...
    
			
    4. 
						
  4. Linux中的LVM和软RAID
			
        在实际工作中,会经常碰到所给的服务器硬盘容量太小,而实际的应用软件中却需要一个容量较大的分区进行数据存储等,除了通过硬件RAID卡来实现合并多硬盘外,其实我们也可以通过软件的方式来实现. 实验 ...
    
			
    5. 
						
  5. java基础-day5
			
    第05天 java基础知识 今日内容介绍 u 方法的概述及基本使用 u 方法的练习及注意事项 u 方法的重载及参数传递 u 方法的操作数组的练习 第1章   方法的概述及基本使用 1.1  方法定义格 ...
    
			
    6. 
						
  6. HDU2976 Dropping tests                                                                                            2017-05-11 18:10             39人阅读              评论(0)              收藏
			
    Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12187   Accepted: 4257 D ...
    
			
    7. 
						
  7. C++中的关键字用法--- explicit
			
    1. C++中的explicit C++提供了关键字explicit,可以阻止不应该允许的经过转换构造函数进行的隐式转换的发生.声明为explicit的构造函数不能在隐式转换中使用. C++中, 一个 ...
    
			
    8. 
						
  8. float 为什么不能用== ，或者大于等于，或者小于等于
			
    本文尝试着将以下内容做一个浅显的解释,主要包括浮点数为什么是不精确的,浮点数为什么不能用==和!=直接比较,以及浮点数的比较方法等几个方面.如果那个地方说的不对还请各位看官不吝赐教!欢迎大家评论区讨论 ...
    
			
    9. 
						
  9. spring集成struts2
			
    Struts2前身是WebWork,核心并没有改变,其实就是把WebWork改名为struts2,与Struts1一点关系没有. Struts2中通过ObjectFactory接口实现创建及获取Act ...
    
			
    10. 
						
  10. Oracle sql 优化の常用方式
			
    1.不要用 '*' 代替所有列名,特别是字段比较多的情况下 使用select * 可以列出某个表的所有列名,但是这样的写法对于Oracle来说会存在动态解析问题.Oracle系统通过查询数据字典将 ' ...
    
			
    11.