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

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

####HTML新控件datalist的实际应用

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


这是在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 = '*';
  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";
    }
  }

  如果本文对您有帮助，欢迎关注微信公众号，为您推送更多大前端相关的内容， 欢迎留言讨论，ε=ε=ε=┏(゜ロ゜;)┛。

  您还可以在这些地方找到我：

• 一个前端开发者的LeetCode刷题之旅
• 掘金