input 下拉框的实践

有一个需求需要做一个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="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>

posted @ 2017-06-25 20:11 我叫睡不醒阅读(2913) 评论(0) 收藏举报

刷新页面返回顶部

我叫睡不醒

input 下拉框 的实践

公告

input 下拉框的实践