模拟datalist

时间 2019-12-04

标签模拟 datalist 繁體版

原文原文链接

datalist标签能够是输入时智能基于相匹配的信息供用户选择。css

发现H5的<datalist> 标签在不一样浏览器的之间的兼容性很差。因此何不本身模拟一个<datalist> 标签呢？html

<!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>

1. DataList嵌套DataList
2. DataList分页
3. Datalist 控件
4. h5 datalist使用
5. HTML5 datalist 标签
6. HTML5 datalist实现suggest功能
7. Easyui datalist 使用记录
8. asp.net学习之DataList控件
9. select与datalist的区别
10. 用aspnetpager实现datalist分页
更多相关文章...
• ASP.NET Web Forms - DataList 控件 - ASP.NET 教程
• ASP.NET MVC - 模型 - ASP.NET 教程
• 委托模式
• Docker容器实战(六) - 容器的隔离与限制