搜索框内容自动提示

最新推荐文章于 2023-07-18 12:26:21 发布

樱丸小桃子！

最新推荐文章于 2023-07-18 12:26:21 发布

阅读量512

点赞数

文章标签： css javascript 前端 ajax

本文链接：https://blog.csdn.net/qq_45806825/article/details/122268710

版权

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>搜索框输入文字自动提示</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 150px;
        }
        
        .list-group {
            display: none;
        }
    </style>
</head>

<body>
    <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 type="text/html" id="tpl">
        {{each result}}
        <li class="list-group-item">{{$value}}</li>
        {{/each}}
    </script>
    <script>
        // 获取搜索框
        var searchInp = document.getElementById('search');
        // 获取提示文字的存放容器
        var listBox = document.getElementById('list-box');
        // 存储定时器的变量
        var timer = null;
        // 当用户在文本框中输入的时候触发
        searchInp.oninput = function() {
            // 清除上一次开启的定时器
            clearTimeout(timer);
            // 获取用户输入的内容
            var key = this.value;
            // 如果用户没有在搜索框中输入内容
            if (key.trim().length == 0) {
                // 将提示下拉框隐藏掉
                listBox.style.display = 'none';
                // 阻止程序向下执行
                return;
            }

            // 开启定时器 让请求延迟发送
            timer = setTimeout(function() {
                // 向服务器端发送请求
                // 向服务器端索取和用户输入关键字相关的内容
                ajax({
                    type: 'get',
                    url: 'http://localhost:3000/searchAutoPrompt',
                    data: {
                        key: key
                    },
                    success: function(result) {
                        // 使用模板引擎拼接字符串
                        var html = template('tpl', {
                            result: result
                        });
                        // 将拼接好的字符串显示在页面中
                        listBox.innerHTML = html;
                        // 显示ul容器
                        listBox.style.display = 'block';
                    }
                })
            }, 800)

        }
    </script>
</body>

</html>

服务器端

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));


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

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

樱丸小桃子！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
搜索框内容自动提示

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>搜索框输入文字自动提示</title> <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css"> <style type="text/css
复制链接

扫一扫