ajax 搜索框内容提示小案例_html oninput ajaxsearch-CSDN博客

本文链接：https://blog.csdn.net/weixin_42321619/article/details/108142451

1.主界面

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="shortcut icon" href="#"/>
	</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">
					
				</ul>
			</div>
		</div>

样式都是bootstrap类库的。

bootstrap.min.css 与 template-web.js 都是第三方提供。可通过npm安装相应模块。

2.js数据

此处js，首先引进封装的ajax文件和模板引擎template。

首先template模板应用，遍历服务器回调数据。显示在提示框内。

定时器，是因为，当在输入框输入内容时，每个字符都会造成一次提交，一次响应。造成资源浪费，所以以定时器的方法，在用户输入一定事件后，定时发送请求，检测关键字。

首先清除是为了，上一次操作所留下的影响。如果一直存在，定时器会在后面创建很多，影响性能。

定时器内，便是发送参数给封装的ajax函数（源码贴后面），在ajax函数内接受初始化设置的请求方式，地址等，对服务器发送请求，接受服务器响应，在通过判断，返回响应结果。

		<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 searchInp = document.getElementById('search');
			//获取提示容器
			var listBox = document.getElementById('list-box');
			//存放定时器
			var timer = null;
			//输入文本时触发事件
			searchInp.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://127.0.0.1:3000/searchBox',
						data:{
							key:key
						},
						success:function(result){
							var html = template('tpl', {result:result});
							listBox.innerHTML = html;
							listBox.style.display = 'block';
						}
					})
				},500)
			}
		</script>

3.结果展示

4.案例源码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="shortcut icon" href="#"/>
	</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">
					
				</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 searchInp = document.getElementById('search');
			//获取提示容器
			var listBox = document.getElementById('list-box');
			//存放定时器
			var timer = null;
			//输入文本时触发事件
			searchInp.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://127.0.0.1:3000/searchBox',
						data:{
							key:key
						},
						success:function(result){
							var html = template('tpl', {result:result});
							listBox.innerHTML = html;
							listBox.style.display = 'block';
						}
					})
				},500)
			}
		</script>
	</body>
</html>

app.js //创建服务器，并设置条件返回响应。

var express = require('express');
const path = require('path');
var app = express();

app.use(express.static(path.join(__dirname,'public')))
app.get('/searchBox',(req, res)=>{
	const key = req.query.key;
	const list = [
		'元尊',
		'剑来',
		'雪中悍刀行',
		'斗破苍穹',
		'武动乾坤',
		'javascript怎么学',
		'前后端交互',
		'前端学习路线',
		'前程似锦',
		'前后左右'
	];
	let result = list.filter(item=>item.includes(key));
	res.send(result)
})

app.listen(3000, (err)=>{
	if(err) throw err;
	console.log('success')
})

ajax.js //封装的ajax函数

function ajax(options) {
	var defaults = {
		type: 'get',
		url: '',
		async: true,
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function() {},
		error: function() {},
	}
	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 += "?" + params;
		xhr.open(defaults.type, defaults.url);
		xhr.send();
	}

	if (defaults.type == 'post') {
		xhr.open(defaults.type, defaults.url);
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
		if (defaults.header['Content-Type' == 'application/json']) {
			xhe.send(JSON.stringify(defaults.data))
		} else {
			xhr.send(params)
		}
	}

	xhr.onload = function() {
		var contentType = xhr.getResponseHeader('content-Type');
		var responseText = xhr.responseText;
		if (contentType.includes('application/json')) {
			responseText = JSON.parse(responseText);
		}
		if (xhr.status == 200) {
			defaults.success(responseText, xhr);
		} else {
			defaults.error(responseText, xhr);
		}
	}

	xhr.onerror = function() {
		defaults.error(xhr);
	}

}