Use mongodb to autofill inputs

user_9085008 0
Viewed 125

I am building a web app with node.js and express server for a project about an airport and I am trying to do the following: There is a form where the user can submit information about an airplane who wants to stay in the airport. This form contains some input fields which require a specific code(like iata). The code is stored in a local mongo database (later online with atlas) and corresponds to a lot of information needed for the form to be completed. How can I let the user write an iata code manually and with the press of a button (enter for example), search the database, find the corresponding iata and autofill the rest text fields but without losing any other information which has already been written in other forms. I don't know if it is entirely possible to do such an operation, but I've seen it being done in the form of autocomplete ( https://developer.mongodb.com/how-to/building-autocomplete-form-element-atlas-search-javascript/ )... The key question would be how I bind a document.onClick event with mongo search The form's router

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const path = require('path');
//const authenticate = require('../authenticate');

const Network_Planner = require('../models/network_planner');

const network_planningRouter = express.Router();

network_planningRouter.use(bodyParser.json());

network_planningRouter.route('/')
    .get((req, res, next) => {
        res.sendFile('network_planning.html', { root: path.join(__dirname, '../public') });
    })
    .post((req, res, next) => {
        Network_Planner.create(req.body)
            .then((plan) => {
                console.log('Plan created ', plan);
                res.statusCode = 200;
                res.setHeader('Content-Type', 'application/json');
                res.redirect('/network_planning');
            }, (err) => next(err))
            .catch((err) => next(err));
    })
    .put((req, res, next) => {
        res.statusCode = 403;
        res.end('PUT operation not supported on /network_planning');
    })
    .delete((req, res, next) => {
        res.statusCode = 403;
        res.end('DELETE operation not supported on /network_planning');
    });


module.exports = network_planningRouter;
mongodb html javascript
1 Answers

I found a solution with ajax and jquery. I am not sure it is the best solution, but a solution nevertheless.

autocompleteform.js

$(document).ready(() => {
    $('#airline_iata').on('keydown', function(e) {
        if (e.keyCode === 13) {
            e.preventDefault();
            var airline_iata = $('#airline_iata').val();

            $.ajax({
                url: "http://localhost:3000/network_planning/form?key=" + airline_iata,
                data: airline_iata,
                type: "GET",
                contentType: "application/json",
                success: (data) => {
                    console.log(data);
                    if (data.length == 0) {
                        $('#airline_icao').val("");
                        $('#airline').val("");
                    } else {
                        $('#airline_icao').val(data[0].ICAO);
                        $('#airline').val(data[0].name);
                    }
                },
                error: (xhr, status, err) => {
                    console.log(err);
                }
            });
        }
    });
});

network_planningRouter.js

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const path = require('path');
//const authenticate = require('../authenticate');

const Network_Planner = require('../models/network_planner');
const Airlines = require('../models/airlines');

const network_planningRouter = express.Router();

network_planningRouter.use(bodyParser.json());

network_planningRouter.route('/')
    .get((req, res, next) => {
        res.sendFile('network_planning.html', { root: path.join(__dirname, '../public') });
    })
    .post((req, res, next) => {
        Network_Planner.create(req.body)
            .then((plan) => {
                console.log('Plan created ', plan);
                res.statusCode = 200;
                res.setHeader('Content-Type', 'application/json');
                res.redirect('/network_planning');
            }, (err) => next(err))
            .catch((err) => next(err));
    })
    .put((req, res, next) => {
        res.statusCode = 403;
        res.end('PUT operation not supported on /network_planning');
    })
    .delete((req, res, next) => {
        res.statusCode = 403;
        res.end('DELETE operation not supported on /network_planning');
    });

network_planningRouter.route('/form')
    .get((req, res, next) => {
        Airlines.find({ IATA: req.query.key })
            .then((iata, err) => {
                if (err) throw err;
                else if (!iata) res.send(null);
                else res.send(iata);
            });
    });

module.exports = network_planningRouter;
user_90850080
Related