实现一个搜索框并实时返回搜索建议项

参考:https://blog.csdn.net/rujin_shi/article/details/83657566

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS实现仿百度搜索框(实时返回搜索建议项)</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
    }
    body {
      background-color: #f0f3ef;
    }
    div {
      box-sizing: border-box;
    }
    .container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .bgDiv {
      width: 595px;
      height: 55px;
      position: relative;
    }
    .input-wrapper {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 33px;
    }
    .search-input-text {
      width: 560px;
      border: 1px solid #b6b6b6;
      background-color: #fff;
      font-size: 18px;
      padding: 3px 0 0 7px;
    }
    .search-input-button {
      flex: 1;
      color: #fff;
      font-size: 16px;
      letter-spacing: 3px;
      background-color: #3385ff;
      border: .5px solid #2d78f4;
      opacity: .9;
      margin-left: -5px;
    }
    .search-input-button:hover {
      opacity: 1;
      box-shadow: 0 1px 1px #333;
      cursor: pointer;
    }
    .suggest {
      width: 516px;
      position: absolute;
      top: 38px;
      border: 1px solid #999;
      background-color: #fff;
      display: none;
    }
    .suggest ul {
      list-style: none;
    }
    .suggest ul li {
      margin: 3px;
      font-size: 17px;
      line-height: 25px;
      cursor: pointer;
    }
    .suggest ul li:hover {
      background-color: #e5e5e5;
    }
  </style>
</head>
<!-- 向输入框动态输入关键词时,将当前关键词作为问号参数后面的值,
  因为要跨域使用百度的接口,所以通过JSONP跨域创建Ajax请求,回调函数处理返回值 -->
<body>
<!-- 默认html和body是没有设置height的,在布局中对于没有设置宽高的块状盒子,宽度
默认100%,高度是由里面的内容自然撑开的 -->
  <div class="container">
    <div class="bgDiv">
      <div class="input-wrapper">
        <input type="text" class="search-input-text" value="" autofocus placeholder="关键词">
        <input type="button" id="btn" class="search-input-button" value="搜索一下">
      </div>
      <div class="suggest">
        <ul id="search-result">
          <!-- 动态创建li,同时进行事件委托,键盘事件--回车键以及上下键都是进行事件委托注册的 -->
        </ul>
      </div>
    </div>
  </div>
  <script>
    let suggestContainer = document.getElementsByClassName(‘suggest‘)[0];
    let searchInput = document.getElementsByClassName(‘search-input-text‘)[0];
    let bgDiv = document.getElementsByClassName(‘bgDiv‘)[0];
    let searchResult = document.getElementById(‘search-result‘);
    //清除建议框内容
    let clearContent = function() {
      let size = searchResult.childNodes.length;
      for(let i = size - 1; i >= 0; i--) {
        searchResult.removeChild(searchResult.childNodes[i]);
      }
    }
    let timer = null;
    //注入输入框键盘抬起事件
    searchInput.onkeyup = function(e) {
      suggestContainer.style.display = ‘block‘;
      //如果输入框内容为空,清除内容且无需跨域请求
      if(this.value.length === 0) {
        clearContent();
        return;
      }
      if(this.timer) {
        clearTimeout(this.timer);
      }
      //40为Dw arrow  38位Up Arrow
      if(e.keyCode !== 40 && e.keyCode !== 38) {
        //函数节流优化
        this.timer = setTimeout(() => {
          //创建script标签JSONP跨域
          let script = document.createElement("script");
          script.src = "http://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) + 
          "&p=3&cb=handleSuggestion";
          document.body.appendChild(script);
        }, 130);
      }
    }
    //回调函数处理返回值
    let handleSuggestion = function(res) {
      //清空之间的数据
      clearContent();
      let result = res.s;
      //截取前五个搜索建议项
      if(result.length > 4) {
        result = result.slice(0, 5);
      }
      //动态创建li标签,显示搜索建议项
      for(let i = 0; i < result.length; i++) {
        let liObj = document.createElement(‘li‘);
        liObj.innerHTML = result[i];
        searchResult.appendChild(liObj);
      }
      //自执行匿名函数--删除用于跨域的script标签
      (function() {
        let s = document.querySelectorAll("script");
        for(let i = 1, len = s.length; i < len; i++) {
          document.body.removeChild(s[i]);
        }
      })();
    }
    let jumpPage = function() {
      window.open(`https://www.baidu.com/s?word=${encodeURI(searchInput.value)}`);
    }
    //事件委托,点击li标签或者点击搜索按钮跳转到百度搜索页面
    bgDiv.addEventListener(‘click‘, function(e) {
      if(e.target.nodeName.toLowerCase() === ‘li‘) {
        let keywords = e.target.innerText;
        searchInput.value = keywords;
        jumpPage();
      } else if(e.target.id === ‘btn‘) {
        jumpPage();
      }
    }, false);
    let i = 0, flag = 1;//键盘向上和向下的区分标志
    //事件委托,监听键盘事件
    bgDiv.addEventListener(‘keydown‘, function(e) {
      let size = searchResult.childNodes.length;
      //13为enter
      if(e.keyCode === 13) {
        jumpPage();
      }
      //键盘向下事件
      if(e.keyCode === 40) {
        if(flag === 0) {
          i = i + 2;
        }
        flag = 1;
        e.preventDefault();
        if(i >= size) {
          i = 0;
        }
        if(i < size) {
          searchInput.value = searchResult.childNodes[i++].innerText;
        }
      }
      //键盘向上事件
      if(e.keyCode === 38) {
        if(flag === 1) {
          i = i - 2;
        }
        flag = 0;
        e.preventDefault();
        if(i < 0) {
          i = size - 1;
        }
        if(i > -1) {
          searchInput.value = searchResult.childNodes[i--].innerText;
        }
      }
    }, false);
    //点击页面上任何其它地方,搜索结果框消失
    document.onclick = () => clearContent();
  </script>
</body>
</html>

实现一个搜索框并实时返回搜索建议项

上一篇:小程序uView中loadMore 加载更多


下一篇:operator-Demo07-08