搜索提示功能

最新推荐文章于 2022-01-26 20:20:16 发布

巷口等风

最新推荐文章于 2022-01-26 20:20:16 发布

阅读量262

点赞数 1

分类专栏： ajax 文章标签：搜索提示功能用ajax实现搜索提示功能

本文链接：https://blog.csdn.net/qq_37855074/article/details/99225237

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

搜索提示功能

所用技术:

ajax
javascript
art-template模板引擎

实现步骤：

获取搜索框并为其添加用户输入事件
获取用户输入的关键字
向服务器发出请求并携带关键字作为请求参数
将响应头数据显示在搜索框底部

代码部分：

search.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       ul,li{
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .container{
            margin:0 auto;
            width: 300px;
        }
        #search{ 
            width: 200px;
            height: 30px;
            outline: none;
            border: 1px solid skyblue;
            padding-left: 10px;
            border-radius: 3px;
        }
        .list-group-item{
            width: 210px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: center;
            line-height: 30px;
            color: grey;
        }
        .list-group{
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-group">
            <input type="text" 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(){
            // 在每一次触发oninput事件的时侯，都要把上一次开启的定时器删掉
            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/search',
                data:{
                    key:key
                },
                success:function(result){
                    //第一个参数是模板名称 第二个参数是数据，要是对象类型
                    //第一个result是属性名 第二个result是属性值
                    //template的返回值就是一个字符串，声明一个变量接收它
                    //使用模板引擎拼接字符串
                    var html = template('tpl',{result:result});
                    //将拼接好的字符串拼接在页面中
                    listBox.innerHTML = html;
                    //显示ul容器
                    listBox.style.display ='block';
                }
            })
            },500)
        }
    </script>
</body>
</html>

app.js代码

const express = require('express');
// 路径处理模块
const path = require('path');
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 输入框文字提示
app.get('/search', (req, res) => {
	// 搜索关键字
	const key = req.query.key;
	// 提示文字列表
	const list = [
		'手机华为',
		'手机挂绳',
		'手机壳',
		'手机架',
		'面膜女补水保湿',
		'面膜补水保湿美白',
		'面膜美白补水淡斑',
		'面膜男士专用',
		'面膜收缩毛孔紧致',
		'面膜补水女',
		'面膜女学生款'
	];
	// 搜索结果
	let result = list.filter(item => item.includes(key));
	// 将查询结果返回给客户端
	res.send(result);
});

app.listen(3000);
console.log('服务器启动成功');

引入的ajax.js文件代码如下：

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);
	// 创建ajax对象
	var xhr = new XMLHttpRequest();
	// 参数拼接变量
	var params = '';
	// 循环参数
	for (var attr in defaults.data) {
		// 参数拼接
		params += attr + '=' + defaults.data[attr] + '&';
		// 去掉参数中最后一个&
		params = params.substr(0, params.length-1)
	}
	// 如果请求方式为get
	if (defaults.type == 'get') {
		// 将参数拼接在url地址的后面
		defaults.url += '?' + params;
	}

	// 配置ajax请求
	xhr.open(defaults.type, defaults.url, defaults.async);
	// 如果请求方式为post
	if (defaults.type == 'post') {
		// 设置请求头
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
		// 如果想服务器端传递的参数类型为json
		if (defaults.header['Content-Type'] == 'application/json') {
			// 将json对象转换为json字符串
			xhr.send(JSON.stringify(defaults.data))
		}else {
			// 发送请求
			xhr.send(params);
		}
	} else {
		xhr.send();
	}
	// 请求加载完成
	xhr.onload = function () {
		// 获取服务器端返回数据的类型
		var contentType = xhr.getResponseHeader('content-type');
		// 获取服务器端返回的响应数据
		var responseText = xhr.responseText;
		// 如果服务器端返回的数据是json数据类型
		if (contentType.includes('application/json')) {
			// 将json字符串转换为json对象
			responseText = JSON.parse(responseText);
		}
		// 如果请求成功
		if (xhr.status == 200) {
			// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
			defaults.success(responseText, xhr);
		} else {
			// 调用失败回调函数并且将xhr对象传递给回调函数
			defaults.error(responseText, xhr);
		} 
	}
	// 当网络中断时
	xhr.onerror = function () {
		// 调用失败回调函数并且将xhr对象传递给回调函数
		defaults.error(xhr);
	}
}

引入的template-web.js文件下载地址：

点击跳转下载页面

巷口等风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索提示功能

搜索提示功能所用技术:ajaxjavascriptart-template模板引擎实现步骤：获取搜索框并为其添加用户输入事件获取用户输入的关键字向服务器发出请求并携带关键字作为请求参数将响应头数据显示在搜索框底部代码部分：search.html代码<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫