nodejs ajax search project like facebook

nodejs ajax search bar with javascript ,juquery and mysql database you can firstly look this project cause this project contain other project

DEMO project3.kodizim.com

Requirements

Server Side

database.js
module.exports = {
    'connection': {
        'host': '127.0.0.1',
        'user': 'root', // username
        'password': 'pass', // password
        'database': 'dbname'// database name
    },
    'database': 'dbname',
};

Do you want to insert row your database click this link and run querys

example

CREATE TABLE `users` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(20) NOT NULL,
  `surname` VARCHAR(20) NOT NULL,
  `username` VARCHAR(20) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=latin1;
INSERT INTO users(name,surname,username) VALUES("Jamie","Lannister","JamieLannister");
INSERT INTO users(name,surname,username) VALUES("Cercei","Lannister","CerceiLannister");
INSERT INTO users(name,surname,username) VALUES("Bronn","Bronn","Bronn");
INSERT INTO users(name,surname,username) VALUES("John","Snow","JohnSnow");
INSERT INTO users(name,surname,username) VALUES("Daenerys","Targaryen","DaenerysTargaryen");
INSERT INTO users(name,surname,username) VALUES("Ramsay","Bolton","JamieLannister")

for security

  var corsOptions = {
        origin: 'http://localhost:3000',
        optionsSuccessStatus: 200
    }
routes.js
app.post('/search', cors(corsOptions),function(req,res){
        console.log(req);
        connection.query('SELECT username from users where username like "%'+req.body.value+'%"', function(err, rows, fields) {
            if (err) throw err;
            var data=[];
            console.log(rows);
            for(i=0;i<rows.length;i++)
              {
                  console.log(rows[i]);
                data.push(rows[i]);
              }
              res.end(JSON.stringify(data));
            });
        });

Client Side

index.ejs
<div class="wrapper">
        <div class="box">
            <div class="row row-offcanvas row-offcanvas-left">
            <div class="column col-sm-12 col-xs-11" id="main">
                <div class="navbar navbar-blue navbar-static-top">  
                    <div class="navbar-header">
                        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle</span>
                            <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span></button>
                    <a href="/" class="navbar-brand logo">l</a>
                    </div>
                    <form class="navbar-form navbar-left">
                        <div class="input-group input-group-sm" style="width:360px;">
                          <input type="text" class="form-control"  placeholder="search" name="srch-term" id="search">
                        </div>
                    </form>
                    <ul class="nav navbar-nav">
                      <li>
                        <a href="/"><i class="glyphicons-home"></i> Home </a>
                      </li>
                    </ul>
                    </nav>
                </div>
                <div class='load' id='div1'>
                  <div class="user" id="user">
                    <div class="deneme"></div>
                  <div class="loader" id="loader"></div>
                    <p class="text"></p>
                  </div>
                </div>
        </div>
    </div></div>
</div>

modal load when you click search box or modal unload and visibility hidden when you click without search box

var $modal = $('div.load');
    $('#search').click(function () {
        console.log("search click");
        $modal.fadeIn();
    });
    $(document).mouseup(function (e) {
        if (!$(e.target).is('#search *, #search')) {
            console.log("normal click");
            $("#user").removeClass("deneme");
            $modal.fadeOut(100);
        }
    });

Load element from routes.js http://localhost/search

 $( document ).ready(function() {
      var key ="";
      $("#search").on("change paste keyup", function() {
        var deger ="";
        if($(this).val() == ""){
          console.log("boş");
        }
        else{
          document.getElementById("loader").style.visibility = "visible";
          deger = $(this).val();
         
          data={}
          data.x=deger;
          $.ajax({
            type: "POST",
            url: 'http://project.kodizim.com:3000/search',
            data:  data,
            success: function(data) {
              document.getElementById("loader").style.visibility = "hidden";
              var obj = JSON.parse(data);
              console.log("obj"+obj);
              $( ".username" ).remove();
              obj.forEach(function(element) {
                console.log(element);
                $('.deneme').append("<div class='username'><img width='50px;' height='60px;' src='http://project.kodizim.com:3000/public/img/"+element.username+".jpg'/>"+element.username+"</div> ")
              }, this);
             
            }
          });
        }
      });
    });

Full code here

Facebook Comments
News Reporter

Leave a Reply

Your email address will not be published. Required fields are marked *