Ajax实现搜索框提示功能
作者:農碼一生 发布时间:2023-09-11 20:51:21
标签: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端口...........');
}
});
来源:https://www.cnblogs.com/wml-it/p/15809251.html
0
投稿
猜你喜欢
- 一、怎么样取得最新版本的MySQL?要安装MySQL,首先要当然要取得它的最新版本,虽然大家都知道在FreeBSD的Packages中可以找
- 本文实例讲述了python实现在控制台输入密码不显示的方法。分享给大家供大家参考。具体实现方法如下:import console;names
- MySQL 查询合并如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字。un
- ajax的优缺点AJAX使用Javascript技术向服务器发送异步请求AJAX无须刷新整个页面因为服务器响应内容不再是整个页面,而是页面中
- 一. 连接池的原理首先, HTTP连接是基于TCP连接的, 与服务器之间进行HTTP通信, 本质就是与服务器之间建立了TCP连接后, 相互收
- 你和用户之间的网站堆栈(简化版)在TXJS大会的最后一天,一个开发者问我:面向对象的CSS没有给你留下一大堆基于表现的class名?网络堆栈
- Elasticsearch是一个分布式、Restful的搜索及分析服务器,Apache Solr一样,它也是基于Lucence的索引服务器,
- 用python连接Oracle是总是乱码,最有可能的是oracle客户端的字符编码设置不对。本人是在进行数据插入的时候总是报关键字"
- 一、python logging日志模块简单封装项目根目录创建 utils/logUtil.pyimport loggingfrom log
- 我们今天主要描述的是php和MySQL转义字符,我们大家都知道php和MySQL转义字符的实际应用比例还是占为多数的,如果你对这一技术,心存
- 本文实例讲述了java 数据库连接与增删改查操作。分享给大家供大家参考,具体如下:1、设置数据库的基本配置信息package mysql;/
- 修改python运行路径import osos.chdir('C:/Users/86177/Desktop')os.chdi
- 解决方法: 给 audio 组件绑定点击事件,手动触发播放暂停方法!代码片段:wxml文件<!-- 判断是语音通话,有通话记录,通话描
- 在生活之中,我们想要去一个很远的地方,可能先走到坐车的地方,再从乘车去目的地。那么,我们是不是可以理解成函数嵌套也是这样,需要不同函数的组合
- 首先,我用的mysql版本号是5.5.17的,最近遇到的问题是在eclipse中通过jdbc往数据库写中文数据的时候,在数据库中显示的是??
- 今天我们整理了ip地址和身份证的javascript验证方法。虽然ip地址和身份证的验证不是很经常会遇到,但是大家也可以研究一下js代码,里
- 最近在工作中涉及到判断服务器所在ip反馈程序使用情况的程序主要要求就是,本机或局域网调试程序时,不反馈其域名(localhost)或ip站长
- pycharm中导入selenium报错现象: pycharm中输入from selenium import webdriver, sele
- python合并文本文件示例代码。python实现两个文本合并employee文件中记录了工号和姓名cat employee.txt:100
- BatchNorm2d中的track_running_stats参数如果BatchNorm2d的参数val,track_running_st