Блог

Итак, у меня есть форма, в которой пользователь будет выбирать входные данные. Во-первых, я хочу создать ввод текста, и в этом случае, когда пользователь пишет, например, A, он будет предлагать все данные из базы данных MYSQL, которые начинаются с A и т. Д. Страница формы /air_tickets, а затем пользователь будет перенаправлен на другую страницу.
Структура файла:

В папке «Представления» находятся все мои страницы .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');
});
 

Все данные будут поступать из таблицы MYSQL под названием flight и содержать такие столбцы, как from_destination и to_destination

Я не могу правильно включить библиотеку typeahead. Но если вы знаете какой-то другой способ создания автокорректного текста в зависимости от моего SQL-запроса, пожалуйста, предложите его мне.

Прежде всего, вам следует отредактировать заголовок вопроса по мере развития исходной проблемы, и вы должны задать его в другом вопросе.

Для Although, my problem now is how I will take the data from the database части

1. вместо form id="form-submit" этого это было бы form action="form-submit"
2. поместите кнопку или ввод(с типом=отправить) внутри формы.
3. отредактируйте строки вашего анализатора app.js тела, чтобы

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

4. добавить module.exports = app; в конце app.js и добавьте module.exports = connection; в конце airTicketsController.js (также удалите коды автозаполнения из airTicketsController.js,форма ejs и index.js на данный момент, чтобы избежать нежелательного вмешательства)
5. затем вы должны прочитать форму, добавив это

 var variable1, variable2;
router.post('/form-submit', function(req,res,next){
    variable1 = req.body.from_destination;
    variable2 = req.body.to_destination
    res.redirect('/yournextpage');
});
 

6. затем запросите свою базу данных в соответствии с вашими потребностями, используя эти две переменные на новой странице

 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;
 

Я нашел это о автозаполнении 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>
 

где теги-это идентификатор ввода текста. И это прекрасно работает.

Хотя сейчас моя проблема в том, как я буду извлекать данные из базы данных