案例:搜索框内容自动提示(ajax)

步骤:

  1. 获取搜索框并为其添加用户输入事件
  2. 获取用户输入的关键字
  3. 向服务器端发送请求并携带关键字作为请求参数
  4. 将响应数据显示在搜索框底部
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>搜索框输入文字自动提示</title>
 6     <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
 7     <style type="text/css">
 8         .container {
 9             padding-top: 150px;
10         }
11         .list-group {
12             display: none;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="container">
18         <div class="form-group">
19             <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
20             <ul class="list-group" id="list-box">
21                 
22             </ul>
23         </div>
24     </div>
25     <script src="/js/ajax.js"></script>
26     <script src="/js/template-web.js"></script>
27     <script type="text/html" id="tpl">
28         {{each result}}
29             <li class="list-group-item">{{$value}}</li>
30         {{/each}}
31     </script>
32     <script>
33         // 获取搜索框
34         var searchInp = document.getElementById('search');
35         // 获取提示文字的存放容器
36         var listBox = document.getElementById('list-box');
37         // 存储定时器的变量
38         var timer = null;
39         // 当用户在文本框中输入的时候触发
40         searchInp.oninput = function () {
41             // 清除上一次开启的定时器
42             clearTimeout(timer);
43             // 获取用户输入的内容
44             var key = this.value;
45             // 如果用户没有在搜索框中输入内容
46             if (key.trim().length == 0) {
47                 // 将提示下拉框隐藏掉
48                 listBox.style.display = 'none';
49                 // 阻止程序向下执行
50                 return;
51             }
52 
53             // 开启定时器 让请求延迟发送
54             timer = setTimeout(function () {
55                 // 向服务器端发送请求
56                 // 向服务器端索取和用户输入关键字相关的内容
57                 ajax({
58                     type: 'get',
59                     url: 'http://localhost:3000/searchAutoPrompt',
60                     data: {
61                         key: key
62                     },
63                     success: function (result) {
64                         // 使用模板引擎拼接字符串
65                         var html = template('tpl', {result: result});
66                         // 将拼接好的字符串显示在页面中
67                         listBox.innerHTML = html;
68                         // 显示ul容器
69                         listBox.style.display = 'block';
70                     }
71                 })
72             }, 800)
73             
74         }
75     </script>
76 </body>
77 </html>

服务器端代码

 1 // 输入框文字提示
 2 app.get('/searchAutoPrompt', (req, res) => {
 3     // 搜索关键字
 4     const key = req.query.key;
 5     // 提示文字列表
 6     const list = [
 7         '前端程序员',
 8         '前端网站',
 9         '前端培训',
10         '前端就业前景',
11         '前端与移动端开发',
12     ];
13     // 搜索结果
14     let result = list.filter(item => item.includes(key));
15     // 将查询结果返回给客户端
16     res.send(result);
17 });

 

posted @ 2020-05-22 18:49  不忘初心l  阅读(385)  评论(0)    收藏  举报