每天一道前端面试题--dataList与自定义dataList

今天主要分享 —- HTML5新控件datalist以及模仿天猫搜索框

HTML新控件datalist的实际应用

  <div class="demo">    <input class="goods" type="text" name="team" value="" list="listData" placeholder="search team">    <datalist id="listData">      <option value="ROX" label="Top1"></option>      <option value="SKT1" label="Top2"></option>      <option value="EDG" label="Top3"></option>      <option value="RNG" label="Top4"></option>    </datalist>  </div>

乍一看，用起来也挺方便的，下面是效果图：

这是在chrome中的效果，如果你用firefox打开之后，你会得到想不到的结果，在firefox中如果option中的value和label多有值得话，它显示的是label。
是不是很坑！！所以只能显示单个标签的时候，差异就会变得很小了。不过还是有很多的差异。这里我推荐大家看一下张鑫旭的文章。

模仿天猫搜索框

看了大神的文章，我们应该多知道了原生的datalist最大的局限性就是UI,所以我们何必不自己DIY一个呢。
前两天用天猫，留意到它的搜索框，于是自己动手弄了一下：
先让大家看一下效果图：

input的默认样式

首先它的input是重置了样式，比如原生input最显著的特点就是它那蓝色的外边.

  outline: 0;

其他的什么宽高的，自己调节一下。

input的placeholder的样式的修改，这里面要使用伪元素，而且各个厂商需要加前缀：

  .goods::-webkit-input-placeholder { /* WebKit browsers */    color: rgb(213,213,213);    font-size: 14px;  }  .goods:-moz-placeholder { /* Mozilla Firefox 4 to 18 */    color: rgb(213,213,213);    font-size: 14px;  }  .goods::-moz-placeholder { /* Mozilla Firefox 19+ */    color: rgb(213,213,213);    font-size: 14px;  }  .goods:-ms-input-placeholder { /* Internet Explorer 10+ */    color: rgb(213,213,213);    font-size: 14px;  }

输入提示

对于输入提示我是采用dl无序列表加上绝对定位实现，提示的结果采用a标签一个个展示，需要改变a标签的display.

  .tip {    display: none;    position: absolute;    top: 32px;    left: 0;    width: 300px;    background-color: #fff;    border: 1px solid rgb(213,213,213);    z-index: 999;  }  .tip a {    display: block;    font-size: 12px;    height: 30px;    line-height: 30px;    width: 100%;    text-align: left;    text-indent: 5px;    color: rgb(213,213,213);  }  .tip a:hover {    background-color: rgb(196,0,0);    color: #fff;  }  a {    text-decoration: none;  }

监听输入框

这是需要监听输入框来弹出提示框，这里要区别onChange和onInput事件。
onChange: 主要是内容改变并且失去焦点的时候触发。
onInput: 内容改变就触发（但是你通过js改变内容时，它不触发。）
这里我就采用少量数据模拟了。

  var datalist = ['男裤','男鞋','男士外套','男士内衣','男袜','男士洗面奶','男士皮带'];  var base = '<a href="javascript:;">*</a>';  var tip = document.getElementById('tip');  var goods = document.getElementById('goods');  goods.addEventListener('input',function(){    if(this.value) {      //当有值得时候，查找对应的提示项。      //这里我就用少量数据模拟了。      update(this.value);    }    else {      //没有输入的隐藏掉提示框      tip.style.display = "none";    }  },false);  //点击推荐的结果 进入。  tip.addEventListener('click',function(e){    var target = e.target;    if(target.tagName === 'A') {      goods.value = target.innerHTML;      tip.style.display = 'none';    }  },false);  //查找数据  function update(val) {    var arr = [];    datalist.map(function(item){      if(item.indexOf(val) !== -1) {        arr.push(item);      }    });    if(arr.length !== 0) {      var len = arr.length;      var htmlStr = '';      for(var i = 0; i < len; i++) {        var temp = base;        //使用正则那是相当的方便啊        temp = temp.replace(/\*/,arr[i]);        htmlStr += temp;      }      tip.getElementsByTagName('dd')[0].innerHTML = htmlStr;      tip.style.display = "block";    }    else {      tip.style.display = "none";    }  }

喜欢的小伙伴可以点击我的github, 互相交流共同进步。