Ajax实现搜索框提示功能
作者:農碼一生
这篇文章介绍了Ajax实现搜索框提示功能的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
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端口...........'); } });
到此这篇关于Ajax实现搜索框提示功能的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。