How to Add Search Functionality to your Node Application

How to Add Search Functionality to your Node Application

In this article, we see how to add a search option to our node application. We will be using '$regex' to search for data in Mongo.

Introduction 

In this article, we see how to add a search option to our node application. We will be using '$regex' to search for data in Mongo. 

*Structure Of The Project *

          |--------models            |                  |-------data.js           |            |---------views           |                  |-----pages           |                  |          |-----home.ejs           |                  |            |                  |-----partial           |                             |-------header.ejs           |                             |------footer.ejs 

          |---------app.js 

Setup The Folder

a) Make a new folder using the command prompt. Type the following command followed by the folder name.

  • mkdir search

b) Switch to the new folder

  • cd search

Setup Node In Folder 

Now setup node in folder

  • npm init -y

And Its execution we will see package.json file which means node is initialised in the folder.

Install Packages

Now install the packages which are required for building the application.

  • npm install express ejs mongoose body-parser

Add New Folder

After installing the package, add two new folders.

  1. Models
  2. Views
  • The models folder will contain the collections(table) schema.
  • Views folder will contain the ejs pages.

Model

In the model folder, add file data.js

var mongoose = require('mongoose');    

var bookSchema = new mongoose.Schema({    
    author:{    
        type:String    
    },    
    books:{    
        type:String    
    }    
});    

module.exports =  mongoose.model('books',bookSchema); 

Views

In the Views folder, add two new folder

  1. Pages
  2. Partial

Partial Folder, add 2 new files

  • header.ejs
<html lang="en">    
    <head>    
        <meta charset="UTF-8">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
        <meta http-equiv="X-UA-Compatible" content="ie=edge">    
        <title>Searching</title>    
        <link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.css">    
        <link rel="stylesheet" href="https://bootswatch.com/_assets/css/custom.min.css">    
    </head>    
    <body>    
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">    
            <a class="navbar-brand" href="#">Searching</a>    
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">    
              <span class="navbar-toggler-icon"></span>    
            </button>    
             <ul class="navbar-nav mr-auto">    
            <li class="nav-item active">    
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>    
            </li>    
            <li class="nav-item">    
              <a class="nav-link" href="#">Features</a>    
            </li>    
            <li class="nav-item">    
              <a class="nav-link" href="#">Pricing</a>    
            </li>    
            <li class="nav-item">    
              <a class="nav-link" href="#">About</a>    
            </li>    
          </ul>    
            <div class="collapse navbar-collapse nav justify-content-end" id="navbarColor01">    
              <form class="form-inline my-2 my-lg-0" action="/search" method="get">    
                <input class="form-control mr-sm-2" type="text" name="dsearch" placeholder="Search">    
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>    
              </form>    
            </div>    
          </nav>    
  • footer.ejs
<footer class="fixed-bottom bg-primary">        
    <div class="text-center" style="color: whitesmoke;">@copyright2020</div>      
   </footer>        
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>      
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>      
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>      
   </body>      
   </html>    

Now in pages, add home.ejs file

  • home.ejs
<%-include('../partial/header')-%>    
<div class=" container">    
    <center>    
    <div class="card" style="width: fit-content;">    
        <div class="card-body">    
         <form action="/" method="POST">    
                <div class="row">    
                  <div class="form-group col-md-12">    
                    <input type="text" class="form-control" name="author" placeholder="Auhtor Name" required>    
                  </div>    
                </div>    
                <div class="row">    
                    <div class="form-group col-md-12"">    
                        <input type="text" class="form-control" name="book" placeholder="Book Name" required>    
                      </div>    
                </div>    
                <button type="submit">Submit</button>    
              </form>     
        </div>    
      </div>    
    </center>    
    <br>    
    <%if(data.length>0){%>    
        <center>    
        <div style="width:auto; border-style: solid;border-color: black;">    
        <table class="table table-border table-hover">    
            <thead class="bg-warning">    
                <tr>    
                    <th>    
                        s.no    
                    </th>    
                    <th>    
                        Auhtor    
                    </th>    
                    <th>    
                        Books    
                    </th>    
                </tr>    
            </thead>    
            <tbody>    
                <%for(var i=0;i< data.length;i++){%>    
                <tr>    
                    <td>    
                        <%=i+1%>    
                    </td>    
                    <td>    
                     <%=data[i].author%>    
                    </td>    
                    <td>    
                      <%=data[i].books%>    
                    </td>    
                </tr>    
                <%}%>    
            </tbody>    
        </table>    
    </div>    
    </center>    
    <%}%>    

    </div>    
<%-include('../partial/footer')-%>    

Add New File

Add a new file to the project folder.

  • app.js

This will be the entry point of our application.

var mongoose = require('mongoose');  
var bodyParser = require('body-parser');  
var express = require('express');  
var bookModel = require('./models/data');  
//connect to db  
mongoose.connect('mongodb://localhost:27017/searchingg',{useNewUrlParser:true})  
.then(()=>console.log('connectd to db'))  
.catch((err)=>console.log('error ',err))  
//init app  
var app = express();  
//set view engine  
app.set('view engine','ejs');  
///fetch the data from request  
app.use(bodyParser.urlencoded({extended:false}));  
//default page load  
app.get('/',(req,res)=>{  
try {  
bookModel.find((err,data)=>{  
if(err){  
console.log(err)  
}else{  
res.render('pages/home',{data:data});  
}  
});  
} catch (error) {  
console.log(error);  
}  
});  
//search  
app.get('/search',(req,res)=>{  
try {  
bookModel.find({$or:[{author:{'$regex':req.query.dsearch}},{books:{'$regex':req.query.dsearch}}]},(err,data)=>{  
if(err){  
console.log(err);  
}else{  
res.render('pages/home',{data:data});  
}  
})  
} catch (error) {  
console.log(error);  
}  
});  
app.post('/',(req,res)=>{  
try {  
var books = new bookModel({  
author:req.body.author,  
books:req.body.book  
});  
books.save((err,data)=>{  
if(err){  
console.log(err)  
}else{  
res.redirect('/');  
}  
})  
} catch (error) {  
console.log(error);  
}  
});  
var port = process.env.PORT || 3000;  
app.listen(port,()=>console.log('server run at '+port));  

Download the code from here.

Thank you for visitting and reading!

node-js mongodb programming npm

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

How to Use Express.js, Node.js and MongoDB.js

In this post, I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.

Node JS Complete Course PDF | Node.js

There are some Features that choose Node.js the foremost decision of programming designers.

Node.js Live | Node.js Docker Tutorial | Dockerizing Node.js App|Node.js Training|Edureka

🔥 Node.js Certification Training: https://www.edureka.co/nodejs-certification-training This Edureka video on 'Node.js Docker Tutorial' will help you in learn...

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Build a REST API using Node.js, Express.js, Mongoose.js and MongoDB

Node.js, Express.js, Mongoose.js, and MongoDB is a great combination for building easy and fast REST API. You will see how fast that combination than other existing frameworks because of Node.js is a packaged compilation of Google’s V8 JavaScript engine and it works on non-blocking and event-driven I/O. Express.js is a Javascript web server that has a complete function of web development including REST API.