首页 > 其他分享> 文章详细

Ajax基础：template-web的应用---搜索框自动提示、filter()筛选

2021-09-21 17:02:29 阅读：75 来源： 互联网

标签：web 定时器 key 触发数组 --- result template filter

利用文本框的oninput事件（当文本框内有内容输入时就会触发）

一旦有输入就会触发，而打字速度很快时就可能某个字或某个词还没有打完就已触发

也就造成了多次的无意义的触发，为了避免无意义的触发随带的请求，采取定时器

对ajax请求采用定时器进行控制（例如下面的案例：事件触发后，每800毫秒发一次请求）

页面结构是从bootstrap上找的个简单的结构：一个input文本框+一个span按钮

自动提示的内容使用ul>li来存放

选用模板：<li></li>

模板数据：服务器端响应过来的数据集合中的元素，每遍历到一个就生成一个li

客户端 13ajax.html 代码：

<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 inp = document.getElementById('inp');
        var listBox = document.getElementById('list-box');
        // 避免无意义请求的发送，采用定时器
        var timer = null;
        // 当input中有输入时就会触发oninput事件
        inp.addEventListener('input', 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) {
                        // template方法返回一个字符串
                        var html = template('tpl', {
                            result: result
                        });
                        // 将拼接好的字符串显示到ul中
                        listBox.innerHTML = html;
                        // 显示ul容器
                        listBox.style.display = 'block';
                    }
                })
            }, 800);
        })
</script>

服务器端 app.js 代码：

const express = require('express');
const path=require('path');
 
const app = express();
 
//指明静态文件目录位置，以便浏览器中对（客户端）静态文件的加载
app.use(express.static(path.join(__dirname, 'public')));
 
// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
    // 搜索关键字
    const key = req.query.key;
    // 提示文字列表
    const list = [
        '旺仔昔昔冰',
        '旺仔小馒头',
        '旺仔大包子',
        '旺仔大肉龙',
        '华为',
        '华为鸿蒙',
        '前端开发',
        '大前端',
        'web前端',
        '前端怎么样',
        '前端很因垂丝汀'
    ];
    // 搜索结果
    let result = list.filter(item => item.includes(key));
    // 将查询结果返回给客户端
    res.send(result);
});
 
app.listen(3000);
console.log('3000已启动');

服务器端使用到了一个方法filter()作用：创建一个新数组来保存原数组中符合条件的元素

1、filter()不对空数组进行检测；不会改变原数组

2、filter()使用方法：array.filter(function(当前元素，当前元素的索引，当前元素属于的数组对象))

第一个参数为必填参数

3、let result = list.filter(item => item.includes(key));

key为接收到客户端发送的关键字，

对数据源中的每一项执行箭头函数，如果包含关键字，则存放到新数组

使用result来接收新数组，最后把result这个新数组再响应给客户端

4、使用模板引擎对result数据对象进行each遍历，同时生成li，最后将拼接好数据的结果返回

5、将拼接好的结果（字符串）用html来接收，添加到页面中

6、为了页面美观，存放li的ul一开始的display应该定为none，当有数据后再改为block

7、定时器问题：

每次触发事件时对请求添加定时器，但是不要忘记每次触发时再将上一个定时器进行clearTimeout清除。

定时器的选用，setInterval和setTimeout：前者每隔时间单位就会触发，后者只触发一次

标签：web,定时器,key,触发,数组,---,result,template,filter
来源： https://blog.csdn.net/qq_38800316/article/details/120402261

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ajax基础：template-web的应用---搜索框自动提示、filter()筛选