每天一道前端面试题--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>

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

![image](http://o8sux93eg.bkt.clouddn.com/datalistChrome.png)

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

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

![image](http://o8sux93eg.bkt.clouddn.com/tmalsearch.png)

#####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";
    }
  }

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

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

展开阅读全文

没有更多推荐了,返回首页