Ajax实现搜索框提示功能

作者:農碼一生 时间:2023-09-11 20:51:21 

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>搜索框输入文字自动提示</title>
   <link rel="stylesheet"  href="./assets/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" />
   <style type='text/css'>
       .list-group{
           display: none;
       }
       .container{
           padding-top: 150px;
       }
    </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">
               <!-- <li class="list-group-item">提示文显示的地方</li> -->
           </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 searchInput=document.getElementById('search');
       //获取提示文字的存放问起
       var listBox=document.getElementById('list-box');
       //存储定时器的变量
       var timer =null;
       //输入框输入触发事件,并清除防抖/节流
       searchInput.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){
               console.log(result);
                  //使用模板引擎拼接字符串
                 var html= template('tpl',{result:result});//获取的result为数组
                 //拼接好的字符串显示在页面
                 listBox.innerHTML=html;
                 console.log(html);
                 //显示ul容器
                 listBox.style.display='block';
              }
          });
            },800 );
       }
   </script>
</body>

</html>

Ajax封装方法:

function ajax(options){

//定义默认
   var defaults ={
       type:'get',
       url:'',
       data:{},
       Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
       success:function(){},
       error:function(){}
   };
   //用options中的对象覆盖defaults中对象
   Object.assign(defaults,options);
   //创建
   var xhr= new XMLHttpRequest();
   //拼接请求参数变量
   var params='';
   //循环用户传递进来的对象格式参数
   for(var attr in defaults.data){
       //将参数转换成字符串格式
       params+= attr +'='+ defaults.data[attr] +'&';
   }
   //字符串截取,将最后的&截取掉
   params= params.substr(0,params.length -1);

//判断请求方式
   if(defaults.type=='get'){
       defaults.url=defaults.url +'?'+ params;
   }

//配置
   xhr.open(defaults.type,defaults.url);
   //发送请求
   if(defaults.type=='post'){
       //用户期望的向服务端传递的请求参数类型
       var contentType=defaults.Headers['Content-Type'];
       //post请求时必须设置的
       xhr.setRequestHeader('Content-Type',contentType);
       //判断请求参数类型
       if(contentType=='application/json'){
           xhr.send(JSON.stringify(defaults.data));
       }else{
           xhr.send(JSON.stringify(params));
       }

}else{                
       xhr.send();
   }

//监听onload事件,当接收完响应数据后触发
   xhr.onload=function(){
   //xhr.getResponseHeader()
   //获取响应头部数据
   var contentType=xhr.getResponseHeader('Content-Type');
   //服务端返回的数据
   var responseText=xhr.responseText;
   if(contentType.includes('application/json')){
       //把JSON字符串转换为JSON 对象
       responseText = JSON.parse(responseText);
   }

//对http状态码判断,判断是否等于200
   if(xhr.status==200){
       //调用处理成功情况的函数
       defaults.success(responseText,xhr);
   }else{
       //调用处理失败的情况函数
       defaults.error(responseText,xhr);
   }      

}
}

服务器端测试代码:

/**** server.js ****/
// 一个简单的后端路由

//1.引入express框架
const express=require('express');

const fs=require('fs');

//2.引入路径处理模块
const path=require('path');
const bodyParser=require('body-parser');//post

//3.创建web服务器
const app=express();

//post
//extended:返回的对象是一个键值对,当extended为false的时候,键值对中的值就为'String'或'Array'形式,为true的时候,则可为任何数据类型。
//解析urlencoded
app.use(bodyParser.urlencoded({extended: false}));
//解析json
app.use(bodyParser.json());

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

//5.配置路由 request 请求   response 响应,回应
//get路由 ,对应12.html
app.get('/searchAutoPrompt',(request,response)=>{
   //响应
   const key = request.query.key;
   var result=["无匹配内容"];
if (key == "合肥") {
       result=['合肥蜀山区','合肥瑶海区','合肥肥西','合肥肥东','合肥新站区'];
response.send(result)
} else if(key == "阜阳") {
       result=['阜阳市阜南县','阜阳卷膜','阜阳火车站','阜阳格拉条'];
response.send(result)
}else {
       response.send(result)
   }  
});

//6.监听端口,进行回调
app.listen(3000,(err)=>{
   // 函数体
   if(!err) {
       console.log('测试ajax请求的服务器开启成功了!');
       console.log('正在监听3000端口...........');
   }
});

来源:https://www.cnblogs.com/wml-it/p/15809251.html

标签:Ajax,搜索框,提示,功能
0
投稿

猜你喜欢

  • 详解Node.js如何开发命令行工具

    2024-05-05 09:21:19
  • 如何利用python检测图片是否包含二维码

    2021-04-13 01:42:53
  • python解析PDF程序代码

    2021-05-17 03:16:55
  • 如何使用pyinstaller打包32位的exe程序

    2021-12-17 10:15:20
  • pandas删除部分数据后重新生成索引的实现

    2023-11-18 04:44:13
  • 影响SQL Server性能的关键三个方面

    2009-02-13 16:59:00
  • 配置php网页显示各种语法错误

    2023-11-14 07:23:04
  • 在ASP中连接使用数据库

    2007-09-22 10:46:00
  • MySQL的命令行提示符及其表达的意思

    2008-03-17 13:34:00
  • 利用keras加载训练好的.H5文件,并实现预测图片

    2021-01-18 21:18:57
  • python实现根据给定坐标点生成多边形mask的例子

    2022-03-22 14:40:15
  • 利用jupyter网页版本进行python函数查询方式

    2022-05-23 17:27:12
  • CentOS 7.6安装MySQL 5.7 GA版的教程图解

    2024-01-27 11:47:48
  • Python字符串、整数、和浮点型数相互转换实例

    2023-09-20 18:05:52
  • 用Python实现一个简单的能够发送带附件的邮件程序的教程

    2023-04-08 11:45:48
  • pytest自动化测试数据驱动yaml/excel/csv/json

    2023-06-18 14:19:47
  • Python word实现读取及导出代码解析

    2021-05-11 07:56:47
  • pygame实现贪吃蛇游戏

    2021-09-23 00:29:21
  • 详解Python安装scrapy的正确姿势

    2023-04-04 01:38:14
  • Python机器学习NLP自然语言处理基本操作词袋模型

    2023-08-20 06:23:30
  • asp之家 网络编程 m.aspxhome.com