如何创建具有自动完成功能的文本输入，然后以 express 方式显示 mysql 数据库中的数据？
Posted
技术标签:
【中文标题】如何创建具有自动完成功能的文本输入，然后以 express 方式显示 mysql 数据库中的数据？【英文标题】：How can I create a text input with autocomplete and then display data from mysql database in express? 【发布时间】：2021-08-15 14:08:09 【问题描述】：所以，我有一个表单，用户将在其中选择输入。首先，我想创建一个文本输入，当用户写例如 A 时，它会建议 mysql 数据库中以 A 等开头的每个数据。表单的页面是 /air_tickets然后用户将被重定向到另一个页面。 文件结构： 在 views 文件夹中，有我所有的 .ejs 页面 (html)。 air_tickets.ejs
<form id="form-submit" method="post">
<div class="container" id="air-form-container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="from_destination">From: </label>
<br>
<input type="text" name="from_destination" class="form-control typeahead tt-query" spellcheck="false" autocomplete="off" placeholder="City or airport" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="to_destination">To: </label>
<br>
<input type="text" name="to_destination" class="form-control" placeholder="City or airport">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-btn">
<button type="submit" class="btn btn-primary" id="submit-btn">Search flights
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</form>
我还找到了一种使用 typeahead 库的方法，但它不能正常工作。这是脚本（我在 air_tickets.ejs 文件中）：
<script>
$(document).ready(function()
$('input.typeahead').typeahead(
name: 'typeahead',
remote: 'http://localhost:3000/search?key=%QUERY',
limit: 10
);
);
</script>
index.js（在路由文件中）
var express = require('express');
var router = express.Router();
// Air tickets controller
const airTicketsController = require('../controllers/airTicketsController');
/* GET home page. */
router.get('/', function(req, res, next)
res.render('home', title: 'Express' );
);
// Air tickets page
router.get('/air_tickets', function(req, res, next)
res.render('air_tickets', title: 'Air tickets' );
);
router.get('/search', airTicketsController.fromDestinations);
airTicketsController.js
const mysql = require('mysql');
// DB connection
const connection = mysql.createConnection(
host: 'localhost',
user: 'myuser',
password: 'mypassword',
database: 'mydatabase'
);
connection.connect(function(error)
if (!!error) console.log(error);
else console.log('CONGRATS! Database Connected!');
);
//---------------
// autocomplete for from_destination
exports.fromDestinations = (req, res) =>
connection.query('SELECT from_destination FROM flight where from_destination LIKE "%' + req.query.key + '%"',
function(err, rows, fields)
if (err) throw err;
var data = [];
for (i = 0; i < rows.length; i++)
data.push(rows[i].from_destination);
res.end(JSON.stringify(data));
);
app.js
const path = require('path');
const express = require('express');
const ejs = require('ejs');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
// DB connection
const connection = mysql.createConnection(
host: 'localhost',
user: 'myuser',
password: 'mypassword',
database: 'mydatabase'
);
connection.connect(function(error)
if (!!error) console.log(error);
else console.log('CONGRATS! Database Connected! (app)');
);
//set views file
app.set('views', path.join(__dirname, 'views'));
//set public file
app.use(express.static(__dirname + '/public'));
//set view engine
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded( extended: false ));
const routes = require('./server/routes/index');
app.use('/', routes);
// Server Listening
app.listen(3000, () =>
console.log('Server is running at port 3000');
);
所有数据都来自名为 flight 的 MYSQL 表，并具有 from_destination 和 to_destination 等列 我无法正确包含预输入库。但是，如果您知道根据我的 SQL 查询创建自动更正文本的其他方法，请向我提出建议。
【问题讨论】：
【参考方案1】：首先，您应该编辑问题标题，因为原始问题已经完成，您应该在另一个问题中提出。
对于Although, my problem now is how I will take the data from the database 部分
-
不是
form id="form-submit"，而是form action="form-submit"
在表单内放置一个按钮或输入（type=submit）。
将app.js 的bodyParser 行编辑为
app.use(express.json());
app.use(express.urlencoded( extended: true ));
-
在 app.js 的末尾添加
module.exports = app; 并在 airTicketsController.js 的末尾添加 module.exports = connection;（同时从 airTicketsController.js、ejs 表单和 index.js 中删除自动填充代码，以避免不必要的干扰）李>
那么你必须通过添加这个来阅读表单
var variable1, variable2;
router.post('/form-submit', function(req,res,next)
variable1 = req.body.from_destination;
variable2 = req.body.to_destination
res.redirect('/yournextpage');
);
-
然后使用新页面上的这两个变量根据您的需要查询您的数据库
router.get('/yournextpage', function(req,res, next)
airTicketsController.query("SELECT * FROM flight WHERE your_column1=? AND your_column2=?",[variable1,variable2],function(err, results, fields)
res.render('yournextpage', title: 'flightdata', retrieved: results);
);
);
module.exports = router;
【讨论】：
我更新了更多详细信息我的文件夹结构和我的代码.. 它运行，但是在下一页它什么都不显示，只是一个空表（如果我输入类似“..WHERE from_destination = 'Paris' AND to_destination = 'London'”在sql查询中，然后显示结果 @Themis 那么，下一页即将到来，但显示手动输入字段的结果？试试console.log(variable1) & variable2 看看变量是否正确初始化。在 router.post 的末尾和 router.get 的开头执行此操作。你得到了什么。
@Themis 也尝试将urlencoded( extended: true 转换为false 并检查它是否有所作为。虽然，如果只是手动输入字段而不是 ? 给你结果，那么你的变量就会有问题
我试过了，没有任何改变。我不知道，我已经检查过我的变量很多次了【参考方案2】：
我发现这个关于 jQuery 自动完成：
<script>
$(function()
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"javascript",
"Lisp",
"Perl",
"php",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete(
source: availableTags
);
);
</script>
其中 tags 是文本输入的 id。它工作正常。 虽然，我现在的问题是如何从数据库中获取数据
【讨论】：
以上是关于如何创建具有自动完成功能的文本输入，然后以 express 方式显示 mysql 数据库中的数据？的主要内容，如果未能解决你的问题，请参考以下文章