I am trying to implement a feature where I have an input on this route to make a live search of employees in the database

app.get('/delete' , isLoggedIn , (req , res) => {
    res.render('pages/delete')
})

This route serves the search input. How do I create a live search based on a keyup event listener that sends the data to mongoDb/mongoose to search and return the results on the page?

I know how to do the event listener to get what is typed like so which is in the delete.js file

const deleteSearchInput = document.querySelector('#search-input');

deleteSearchInput.addEventListener('keyup' , (e) => {
    let search = e.target.value.trim()
})

How do I send the value "e" to a post route to do the search and return it to the page

CodePudding user response：

AJAX (using the JavaScript fetch API). AJAX allows JavaScript to send requests to the server without reloading.

const deleteSearchInput = document.querySelector('#search-input');

deleteSearchInput.addEventListener('keyup' , (e) => {
    let search = e.target.value.trim();
    fetch('/delete', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({search})
    }).then(res =>
        res.json()
    ).then(data => {
        console.log(data.result); // <-- success!
    }).catch(err => {
        alert('error!');
        console.error(err);
    });
});

Then you have changes to make to the server side. Since you're sending a POST request, you need to create a handler to POST:

app.post('/delete', isLoggedIn, (req, res) => {
    res.send('success!');
});

This will handle post requests, and only post requests. Now to get the value of whatever you sent to the server, we need to use an npm package called body-parser, which parses the incoming request. Run the following command in shell:

npm i body-parser

Then at the top of your server file before declaring your routes import and use the body-parser library:

const bodyParser = require('body-parser');
app.use(bodyParser.json()); // <-- add the JSON parser

Finally change your handler again:

app.post('/delete', isLoggedIn, (req, res) => {
    const { search } = req.body;
    console.log(search);
    // ... do whatever you want and send a response, e.g.:
    const result = 'my awesome message';
    res.json({ result });
});

And that's how you do it.