今天主要分享 —- 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, 互相交流共同進步。