datalist标签可以是输入时智能基于相匹配的信息供用户选择。
发现H5的<datalist> 标签在不同浏览器的之间的兼容性不好。所以何不自己模拟一个<datalist> 标签呢?
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>模拟datalist标签</title>
<style>
body{
margin: auto;
text-align: center;
}
#dataL{
width: 500px;
padding: 0;
margin: auto;
margin-top: 200px;
}
#dataL input{
width: 89%;
height: 1.85em;
padding: 0;
margin: 0;
line-height: 1.8em;
outline: none;
border: none;
border: 1px solid darkblue;
}
#dataL button{
width: 4.7%;
padding: 0;
height: 2em;
margin: 0;
border: none;
background-color: darkblue;
color: white;
outline: none;
display: inline;
position: absolute;
border-bottom-right-radius: 7%;
border-top-right-radius: 7%;
}
#dataL button:active{
color: yellow;
background-color: blue;
}
#dataSpan{
width: inherit;
min-height: 1em;
max-height: 200px;
background-color: white;
position: absolute;
display: none;
margin-left: 27px;
box-shadow: 1px 1px 1px;
padding-left: 2%;
overflow-y: scroll;
padding-top: 20px;
padding-bottom: -2px;
padding-right: 5px;
padding-left: 5px;
}
#dataSpan ul li{
float: left;
list-style: none;
margin-left: 20px;
}
#dataSpan ul{
display: block;
border-bottom: 1px solid darkblue;
height: 2em;
line-height: 2em;
text-align: center;
margin: auto;
}
#dataSpan ul:hover{
background-color: rgba(178,178,178,0.33);
}
#dataSpan ul:active{
background-color: rgba(218,255,40,0.73);
}
</style>
</head>
<body>
<div id="dataL">
<input type="text" id="dataInput" placeholder="请输入..."/>
<button>+</button>
<div id="dataSpan" >
</div>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script>
var jsonData = [
{'emailInfo':'张三_zhangsan@163.com_开发组'},
{'emailInfo':'李四_lisi@163.com_开发组'},
{'emailInfo':'小明_xiaoming@163.com_开发组'},
{'emailInfo':'黄红_huanghong@163.com_开发组'},
];
$('#dataL input').focus(function () {
$('#dataSpan').css('display','block');
});
var dataInput = document.getElementById('dataInput');
dataInput.oninput = function () {
var str = $('#dataInput').val();
initDataL(jsonData,str);
};
function ulClick() {
var str = $(this).children().eq(1).text();
$('#dataL input').val(str);
$('#dataSpan').css('display','none');
}
function initDataL(data,str) {
var v = '';
for(var i in data){
var cInfo = data[i].emailInfo;
var arr = cInfo.toString().split('_');
if(str != ''){
if(cInfo.indexOf(str) > -1){
v = v + '<ul>\n' +
' <li>'+arr[0]+'</li>\n' +
' <li>'+arr[1]+'</li>\n' +
' <li>'+arr[2]+'</li>\n' +
' </ul>';
}
}
}
$('#dataSpan').html(v);
$('#dataSpan ul').click(ulClick);
}
</script>
</body>
</html>