js原生搜索框自動搜索

場景：搜索框，模糊搜索

HTML：

<body>
  <div class="searchBox">
    <input type="search" name="" placeholder="請輸入" id="search">
    <ul class="ulList">
    </ul>
  </div>
  <script src="./js/ajax.js"></script>
  <script src="./js/index.js"></script>
</body>

SCSS:

.searchBox{
  position: fixed;
  top: 20%;
  left: 50%;
  width: 50%;
  transform: translate(-50%);
  #search{
    width: 100%;
    border: 1px solid #000;
    height: 30px;
    outline:none;
    font-size: 16px;

  }
  .ulList{
    list-style: none;
    margin: 0;
    padding: 0;
    .liList{
      font-size: 16px;
      margin-top: -2px;
      padding-left: 2px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #000;
      border-top: none;
    }
  }
}

JS:

//封裝的ajax
function ajax(Options) {
  var defaults = {
    type: 'GET',
    url: '',
    data: {},
    header: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    success: function(res,xhr) {
      console.log(res)
    },
    error: function (err,xhr) {
      console.log(err)
      console.log(xhr)
    }
  };

  Object.assign(defaults, Options)

  var xhr = new XMLHttpRequest();

  var params = ''

  for( var attr in defaults.data ){
    params += attr + '=' + defaults.data[attr] +'&'
  }

  params = params.substr(0, params.length - 1)

  if (defaults.type == 'GET') {
    defaults.url = defaults.url + '?' + params
  }

  xhr.open(defaults.type, defaults.url)
  
  if (defaults.type == 'POST') {
    var contentType = defaults.header['Content-Type']

    xhr.setRequestHeader('Content-Type', contentType)

    if (contentType == 'application/json') {
      xhr.send(JSON.stringify(defaults.data))
    }else{
      xhr.send(params)
    }
  }else{
    xhr.send()
  }

  xhr.onload = function () {
    var contentType = xhr.getResponseHeader('Content-Type')

    var responseText = xhr.responseText

    if( contentType && contentType.includes('application/json')){
      responseText = JSON.parse(responseText)
    }

    if ( xhr.status >= 200 && xhr.status < 300 ) {
      defaults.success(responseText, xhr)
    }else{
      defaults.error(responseText, xhr)
    }
  }
}

var searchInput = document.getElementById('search');
var ulList = document.getElementsByClassName('ulList')[0];
var ulListNode = ulList.getElementsByTagName("li");
var timer = null;

//監聽input嘗試輸入
searchInput.oninput = function () {
  // 判斷input除去空格后的長度是否為0
  if (searchInput.value.trim().length == 0) {
    // 為0則清除ul下所有li
    for (let i = ulListNode.length; i > 0; i--) {
      ulList.removeChild(ulListNode[i - 1])
    }
  } else {
    //清除定時器
    clearTimeout(timer);
    //啟動定時器，用來防抖
    timer = setTimeout(function () {
      // 發送請求
      ajax({
        url: 'http://127.0.0.1:8001/server',
        data: {
          keyWord: searchInput.value
        },
        header: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          // 清除ul里的子節點li，用的倒敘
          for (let i = ulListNode.length; i > 0; i--) {
            ulList.removeChild(ulListNode[i - 1])
          }

          //根據傳回數據創建ul下的li
          for (let i = 0; i < res.length; i++) {
            var liNode = document.createElement("li")
            liNode.classList.add('liList')
            liNode.innerHTML = res[i]
            ulList.appendChild(liNode)
          }

          //如果input中value為空清除ul下li
          if ( searchInput.value == '') {
            for (let i = ulListNode.length; i > 0; i--) {
              ulList.removeChild(ulListNode[i - 1])
            }
          }
        }
      })
    }, 300);
  }
}

新手自己學習,有什么問題請大家多多諒解