Javascript 如何使用autocomplete创建文本输入，然后在express中显示mysql数据库中的数据？

因此，我有一个表单，用户将在其中选择输入。首先，我想创建一个文本输入，当用户编写例如a时，它将建议MYSQL数据库中以a等开头的所有数据。表单的页面是/air_tickets，然后用户将被重定向到另一个页面。 文件结构： 在views文件夹中，有所有my.ejs html页面。 机票

airticketcontroller.js

所有数据都将来自一个名为flight的MYSQL表，并具有诸如from_destination和to_destination之类的列

---

我不能正确地包括typeahead库。但是，如果您知道根据我的SQL查询创建自动更正文本的其他方法，请向我推荐。

我发现了关于jQuery autocomplete的以下内容：

<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。而且效果很好。

---

尽管如此，我现在的问题是如何从数据库中获取数据

首先，随着原始问题的进展，您应该编辑问题标题，您应该在另一个问题中提问

尽管如此，我现在的问题是如何从数据库部分获取数据

而不是表单id=表单提交，而是表单操作=表单提交 在表单中放置一个type=submit的按钮或输入。 编辑app.js的bodyParser行以 添加module.exports=app；在app.js的末尾添加module.exports=connection；在airTicketsController.js的末尾，现在还从airTicketsController.js、ejs表单和index.js中删除自动填充代码，以避免不必要的干扰 然后你必须通过添加以下内容来阅读表格 然后在newpage上使用这两个变量根据需要查询数据库

---

我更新了我的文件夹结构和代码的更多细节。它会运行，但在下一页它不会显示任何内容，如果我在sql查询中输入类似的内容，则只会显示一个空表。WHERE from_destination='Paris'和to_destination='London'，然后显示results@Themis所以下一页即将到来，但会显示手动键入字段的结果？尝试console.logvariable1和variable2，查看变量是否正确初始化。在router.post的末尾和router.get的开头执行此操作。您得到了什么。@Themis还尝试将urlencoded{extended:true}转换为false，并检查是否有差异。虽然，如果只是手动输入字段而不是？’来给出结果，那么您的变量可能有问题。我尝试了，但没有任何改变。我不知道，我已经检查过我的变量很多次了

<script>
        $(document).ready(function() {
            $('input.typeahead').typeahead({
                name: 'typeahead',
                remote: 'http://localhost:3000/search?key=%QUERY',
                limit: 10
            });
        });
    </script>

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);

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));
        });
}

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');
});

<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>

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

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;