ajax练习——淘宝搜索框

一、效果

 

二、代码

html

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
<div class="container">
        <img id="logo" src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png">
        <div class="box">
            <div class="search-bar">
                <div class="tags">
                    <div class="tab-active">宝贝</div>
                    <div>店铺</div>
                </div>
                <div class="search">
                    <input id="ipt" placeholder="请输入要搜索的内容" type="text">
                    <button id="btnSearch" type="submit">搜&nbsp; 索</button>
                </div>
            </div>
        </div>
        <ul class="suggestList" style="display: none">
        </ul>
    </div>

css

   .container {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin: 60px auto;
            }
        
        img {
            width: 190px;
            }
        
        .tags {
            display: flex;
                
            }
        
        .tags div {
            height: 25px;
            padding: 0 15px 0;
            text-align: center;
            font-size: 12px;
            line-height: 25px;
            }
        
        .tab-active {
            color: white;
            
            font-weight: 600;
            background-color: #ff5700;
            }
        
        .search-bar {
            
            margin-top: 50px;
            }
        
        .search {
            display: flex;
            margin-top: -2px;
            }
        
        #ipt {
            width: 500px;
            height: 29px;
            border: 2px solid #ff5500;
            outline: none;
            }
        
        #btnSearch {
            width: 90px;
            height: 35px;
            color: white;
            border: none;
            background-color: #ff5500;
            }
        
        li {
            padding: 5px;
            list-style: none;
            }
        
        .suggestList {
            position: absolute;
            top: 246px;
            width: 596px;
            margin: 0;
            padding: 0;
            border: 1px solid #c7c7c7;
            border-top: none;
            font-size: 12px;
            }

 js

      let cacheObj = {};/*用于存放缓存数据*/
      //防抖
      function debounce(callback, delay) {
        let timer = null;
        return function() {
          if (timer) { /*判断timer是否为空*/
            clearTimeout(timer);
          }
          timer = setTimeout(callback, delay);
        };
      }

      // 渲染ui结构
      function renderSuggestList(res) {
        let arr = [];
        $.each(res.result, (i, item) => {
          arr.push(`<li>${item[0]}</li>`);
        });
        $('.suggestList').empty().append(arr.join(''));
        $('.suggestList').show();
        // 文本框失去焦点要隐藏建议列表
        $('#ipt').on('blur', function() {
          $('.suggestList').hide();
        });
      }

      // 获取建议列表数据
      function getSuggestList(keywords) {
        $.ajax({
          url: 'https://suggest.taobao.com/sug?q=' + keywords,
          dataType: 'jsonp',
          success: function(res) {
            cacheObj[keywords] = res;/*把关键词对应的数据存入缓存对象*/
            renderSuggestList(res);/*进行页面渲染*/
          },
        });
      }

      // 为输入框绑定keyup事件
      $('#ipt').on('keyup click', function() {
        let keywords = $('#ipt').val().trim();
        if (keywords.length === 0) {/*判断是否有内容*/
          $('.suggestList').hide();
          return;
        }
        // 判断缓存对象中是否有关键词信息，如果有就不用获取jsonp数据，直接把信息渲染进页面
        if (cacheObj[keywords]) {
          return renderSuggestList(cacheObj[keywords]);
        }
        debounce(getSuggestList(keywords), 500);
      });

三、感悟