Question

我正在使用 node.js 和 express 服务器构建一个关于机场的项目的网络应用程序，我正在尝试执行以下操作：有一个表单，用户可以在其中提交有关想要留在机场的飞机的信息。此表单包含一些需要特定代码（如 iata）的输入字段。代码存储在本地 mongo 数据库中（后来与 atlas 联机），对应于完成表单所需的大量信息。如何让用户手动编写 iata 代码并按下按钮（例如输入），搜索数据库，找到相应的 iata 并自动填充其余文本字段，但不会丢失已写入的任何其他信息其他形式。我不知道是否完全有可能进行这样的操作，但我已经看到它以自动完成（ https://developer.mongodb.com/how-to/building-autocomplete-form-element-atlas-search-javascript/ ）的形式完成... 关键问题是我如何将 document.onClick 事件与 mongo 搜索绑定表单的路由器

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;

Answer 1

我找到了一个使用 ajax 和 jquery 的解决方案。我不确定这是最好的解决方案，但仍然是一个解决方案。

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;

使用 mongodb 自动填充输入

1 个答案: