模擬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容器實戰(六) - 容器的隔離與限制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。