交互搜索框提示_搜索框结果显示交互-CSDN博客

本文链接：https://blog.csdn.net/weixin_46002223/article/details/110492752
<body>
    <!--
        1、获取搜索框并为其添加用户输入事件
        2、获取用户输入的关键字
        3、向服务器端发送请求并携带关键字作为请求参数
        4、将响应数据显示在搜索框底部
    -->
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
            <ul class="list-group" id="list-box">
            </ul>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script id="tpl" type="text/html">
        <!-- 循环 -->
        {{each result}}
        <li class="list-group-item">{{$value}}</li>
        {{/each}}
    </script>
    <script>
        // 获取搜索框
        var searchInp = document.getElementById('search');
        // 获取提示文字存放容器
        var listBox = document.getElementById('list-box');
        // 存储定时器的变量
        var time = null;
        // 当用户在文本框中输入的时候触发
        searchInp.oninput = function() {
            // 清除上一次定时器
            clearTimeout(time);
            // 获取用户输入内容
            var key = this.value;
            // 如果用户没有在搜索框中输入内容
            if (key.trim().length == 0) {
                // 将提示下拉框隐藏掉
                listBox.style.display = 'none';
                // 所以也没必要向服务器发送请求
                // 阻止程序向下运行
                return;
            }
            // 开启定时器让请求延迟发送
            time = setTimeout(function() {
                // 向服务器端发送请求
                // 向服务器端索取和用户输入关键字相关的内容
                ajax({
                    type: 'get',
                    url: 'http://localhost:3000/searchAutoPrompt',
                    data: {
                        key: key
                    },
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    // result服务器端返回的数据
                    success: function(result) {
                        // console.log(result);
                        // 使用模板引擎拼接字符串
                        var html = template('tpl', {
                            result: result
                        });
                        // 将拼接好的字符串显示在页面中
                        listBox.innerHTML = html;
                        // 显示ul容器
                        listBox.style.display = 'block';
                    },
                    error: function() {}
                })
            }, 800)
        };
    </script>
</body>




// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
    var key = req.query.key;
    // 提示文字列表
    const list = [
        '黑马程序员',
        '黑马程序员官网',
        '黑马程序员顺义校区',
        '黑马程序员学院报名系统',
        '传智播客',
        '传智博客前端与移动端开发',
        '传智播客大数据',
        '传智播客python',
        '传智播客java',
        '传智播客c++',
        '传智播客怎么样'
    ];
    // 搜索结果

    let result = list.filter(item => item.includes(key));
    // 将查询的结果返给客户端
    res.send(result);
})