仿淘宝搜索栏，实现用户输入搜索关键字时可以显示搜索提示的效果 Ajax

要实现的 UI 功能

在这里插入图片描述

依赖文件：

jQuery https://jquery.com/
art-template 模板引擎 https://aui.github.io/art-template/

实现步骤：

获取用户输入的搜索关键字
封装函数，用于发送 Ajax 请求
利用模板引擎渲染 UI 结构

获取用户输入的搜索关键字

// 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
   // 获取用户输入的内容
   var key = $(this).val().trim()
   // 判断用户输入的内容是否为空
   if (key.length <= 0) {
     return
   }
 })

封装 getList 函数

function getList(key) {
   $.ajax({
      // 指定请求的 URL 地址，其中，q 是用户输入的关键字
      url: 'https://suggest.taobao.com/sug?q=' + kw,
      // 指定要发起的是 JSONP 请求
      dataType: 'jsonp',
      // 成功的回调函数
      success: function(res) { console.log(res) }
   })
 }

利用模板引擎渲染 UI 结构

<!-- 模板结构 -->
 <script type="text/html" id="tpl-suggestList">
    {{each result}}
       <div class="suggest-item">{{$value[0]}}</div>
    {{/each}}
</script>

<!-- 定义渲染模板结构的函数 -->
<script>
    // 渲染建议列表
 	function readerList(res) {
        // 如果没有需要渲染的数据，则直接退出
        if (res.result.length <= 0) {
            return $("#suggest-list").empty().hide()
        }
        // 渲染模板结构
        let htmlStr = template("tpl", res)
        $("#suggest-list").html(htmlStr).show()
    }
    
    // 搜索关键词为空时隐藏搜索建议列表
     $("#ipt").on("keyup", function() {
        clearTimeout(timer)
        let key = $(this).val().trim()
        if (key.length <= 0) {
            // 如果搜索关键字为空，则清空后隐藏列表
            return $("#suggest-list").empty().hide()
        }
        getList(key)
    })
    
    // 当搜索框失去焦点时也会清空隐藏列表
    $("#ipt").on("blur", function() {
        $("#suggest-list").empty().hide()
    })
</script>

完整代码

<!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>tb</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
        }
        
        .logo {
            width: 225px;
            height: 65px;
            margin: 50px 0;
        }
        
        .tabs {
            display: flex;
        }
        
        .tabs>div {
            width: 55px;
            height: 23px;
            line-height: 23px;
            text-align: center;
            cursor: pointer;
        }
        
        .tabs>div:hover {
            text-decoration: underline;
            color: #ff5700;
        }
        
        .tab-active {
            background-color: #ff5700;
            font-weight: bold;
            color: white;
        }
        
        .tabs>.tab-active:hover {
            color: white;
            text-decoration: none;
        }
        
        .search-box {
            display: flex;
            align-items: center;
        }
        
        .search-box .ipt {
            box-sizing: border-box;
            width: 500px;
            height: 34px;
            line-height: 30px;
            margin: 0;
            padding: 0;
            padding-left: 5px;
            outline: none;
            border: 2px solid #ff5700;
        }
        
        .btnSearch {
            margin: 0;
            height: 34px;
            border: none;
            background-color: #ff5700;
            color: white;
            letter-spacing: 1em;
            text-align: center;
            width: 90px;
            padding-bottom: 5px;
            outline: none;
            cursor: pointer;
        }
        
        .btnSearch:hover {
            opacity: 0.9;
        }
        
        #suggest-list {
            border: 1px solid #ccc;
            display: none;
        }
        
        .suggest-item {
            line-height: 30px;
            padding-left: 5px;
        }
        
        .suggest-item:hover {
            cursor: pointer;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="./images/taobao_logo.png" alt="" class="logo" />
        <div class="box">
            <div class="tabs">
                <div class="tab-active">宝贝</div>
                <div>店铺</div>
            </div>
            <div class="search-box">
                <input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
                    搜索
                </button>
            </div>
            <!-- 搜索建议列表 -->
            <div id="suggest-list"></div>
        </div>
    </div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="./lib/template-web.js"></script>

<!-- 模板结构 -->
<script type="text/html" id="tpl">
    {{each result}}
    <div class="suggest-item">{{$value[0]}}</div>
    {{/each}}
</script>

<script>
    // 添加计时器
    var timer = null

    // 获取用户输入的搜索关键字
    $("#ipt").on("keyup", function() {
        clearTimeout(timer)
        let key = $(this).val().trim()
        if (key.length <= 0) {
            // 如果搜索关键字为空，则清空后隐藏列表
            return $("#suggest-list").empty().hide()
        }
        getList(key)
    })

    // 当搜索框失去焦点时也会清空隐藏列表
    $("#ipt").on("blur", function() {
        $("#suggest-list").empty().hide()
    })

    // 封装函数，发起请求
    function getList(key) {
        // 请求延时发送
        timer = setTimeout(() => {
            $.ajax({
                url: 'http://suggest.taobao.com/sug?q=' + key,
                dataType: 'jsonp',
                success: function(res) {
                    readerList(res)
                }
            })
        }, 600);
    }

    // 封装函数，渲染模板结构
    function readerList(res) {
        // 如果没有需要渲染的数据，则直接退出
        if (res.result.length <= 0) {
            return $("#suggest-list").empty().hide()
        }
        // 渲染模板结构
        let htmlStr = template("tpl", res)
        $("#suggest-list").html(htmlStr).show()
    }
</script>

</html>

版权声明：本文为qq_56588657原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_56588657/article/details/124724642