ajax搜索框内容自动提示

最新推荐文章于 2021-12-05 12:08:02 发布

江呱呱

最新推荐文章于 2021-12-05 12:08:02 发布

阅读量343

点赞数

分类专栏： js ajax 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108564964

版权

js 同时被 2 个专栏收录

76 篇文章 2 订阅

订阅专栏

ajax

10 篇文章 0 订阅

订阅专栏

ajax搜索框内容自动提示

1.服务器端代码

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
// 创建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('服务器启动成功');

2.客户端代码

<!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() {
            // console.log(1);
            //获取用户输入的内容
            var key = this.value;
            //如果用户没有在搜索框中输入内容
            if (key.trim().length == 0) {
                //将提示下拉框隐藏掉
                listBox.style.display = 'none'
                return;
            }
            //向服务器端索取和用户输入关键字相关的内容
            timer = setTimeout(function() {
                //清除上一次开启的定时器
                clearTimeout(timer);
                ajax({
                    type: 'get',
                    url: 'http://localhost:3000/searchAutoPrompt',
                    data: {
                        key
                    },
                    success: function(result) {
                        var html = template('tpl', {
                            result: result
                        });
                        //将拼接好的字符串显示在页面中
                        listBox.innerHTML = html;
                        //显示ul容器
                        listBox.style.display = 'block'
                    }
                })
            }, 800)

        }
    </script>

</body>

</html>

江呱呱

关注

0
点赞
踩
1

收藏

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

ajax搜索框内容自动提示1.服务器端代码// 引入express框架const express = require('express');// 路径处理模块const path = require('path');const formidable = require('formidable');// 创建web服务器const app = express();// 静态资源访问服务功能app.use(express.static(path.join(__dirname, 'publi
复制链接

扫一扫