ajax搜索框输入文字自动提示

最新推荐文章于 2021-11-29 09:29:07 发布

昵称2-20个字符

最新推荐文章于 2021-11-29 09:29:07 发布

阅读量821

点赞数

分类专栏： ajax 文章标签： ajax nodejs

本文链接：https://blog.csdn.net/weixin_39517183/article/details/107908446

版权

该博客介绍如何利用Ajax实现搜索框内容自动提示。通过监听用户输入事件，发送包含关键字的请求到服务器，接收响应数据并在搜索框底部显示提示。技术栈包括html、css、JavaScript、nodejs和art-template模板引擎。

摘要由CSDN通过智能技术生成

搜索框内容自动提示

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

demo使用技术

html、css、JavaScript
nodejs、art-template模板引擎、ajax

源码：

node app.js

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
const formidable = require('formidable');
// 创建web服务器
const app = express();

// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
   
   // 搜索关键字
   const key = req.query.key;
   // 提示文字列表
   const list = [
   	'百度',
   	'百度文库',
   	'百度图库',
   	'百度地图',
   	'百度一下',
   	'百度app',
   	'前端开发工程师',
   	'前端从入门到放弃',
   	'Ajax'