Node implements search box for fuzzy query

This article example shares the specific code for Node to implement fuzzy query in the search box for your reference. The specific content is as follows

1. Demand

Click the search icon in the navigation bar to display the search box, so you can perform a fuzzy search on the article.

2. Create a table

1.blog table

Add a foreign key:

2. Nav table

3.type table

4.user table

3. Pages and styles

like.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Query</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" >
    <link rel="stylesheet" href="/css/index.css" >
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <%-include('detachPart/nav.ejs')%>
    <%-include('detachPart/search.ejs')%>
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <%-include('bigPart/ownblog.ejs')%>
            </div>  
            <div class="col-lg-3">
                <%-include('smallPart/recommend.ejs')%>
                <%-include('smallPart/rank.ejs')%>
                <%-include('smallPart/rightimg_1.ejs')%>
                <%-include('smallPart/information.ejs')%>
                <%-include('smallPart/mylink.ejs')%>
            </div>
        </div>
    </div>
    <%-include('detachPart/footer.ejs')%>
</body>
</html>

search.ejs:

<div class="container searchclose">
    <form action="/like" method="GET">
        <input name="link" type="text" placeholder="Please enter keywords">
        <input type="submit" value="Search">
        <img class="closebtn" src="image/icon/close.png" alt="">
    </form>
</div>

index.css:

.searchclose{
    display: none;
    position: relative;
    margin: 0.5rem auto;
    padding: 1rem 0;
    text-align: center;
    background-color: white;
}
.searchclose input:nth-child(1){
    width: 25rem;
    height: 2.2rem;
    outline: none;
    font-size: 0.9rem;
    padding-left: 0.5rem;
    border: 1px solid silver;
    box-sizing: border-box;
    vertical-align: middle;
}
.searchclose input:nth-child(2){
    display: inline-block;
    width: 10rem;
    height: 2.2rem;
    line-height: 2.2rem;
    background-color: rgb(41, 41, 41);
    color: white;
    vertical-align: middle;
    border: 1px solid rgb(41, 41, 41);
    border-style: none;
    margin-left: -1rem;
}
.searchclose img{
    position: absolute;
    top: 0;
    right: 0;
}

index.js:

$(function(){
    $(".searchbtn").click(function(){
        $(".searchclose").show();
    });
    $(".closebtn").click(function(){
        $(".searchclose").hide();
    });
});

MySQL Data

connection.js:

var mysql = require("mysql");
var setting = require("./setting");
var connection;
var connectionmysql=function(){
    connection = mysql.createConnection({
        host:setting.host,
        port:setting.port,
        user:setting.user,
        password:setting.pwd,
        database:setting.base
    });
}
connectionmysql(); 
exports.select = function (str, callback) {
    connectionmysql();  
    connection.query(str,function(err,res){
        if(err) throw err;
        callback(res);
        connection.end();  
    });
}   
exports.find = function (str, params, callback) {
    connectionmysql();  
    connection.query(str,params,function(err,res){
        if(err) throw err;
        callback(res);
        connection.end();  
    });
}

sql.js:

module.exports={
    findTitle:"select * from nav",
    clickRank:"select id,title from blog order by num desc limit 7",
    recommendInfo:"select id,title,logo,recommend from blog where recommend=1 limit 8",
    likeBlog:"select blog.id,title,intro,logo,time,type.typeinfo,user.face from blog,type,user where blog.type=type.id and blog.face=user.id and title like ? order by time desc"
}

promise.js:

var mysql = require("../MySQL/connection");
var sql = require("../MySQL/sql");
module.exports={
    findTitle:function(){
        return new Promise(function(resolve){
            mysql.select(sql.findTitle,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        })
    },
    clickRank:function(){
        return new Promise(function(resolve){
            mysql.select(sql.clickRank,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    },
    recommendInfo:function(){
        return new Promise(function(resolve){
            mysql.select(sql.recommendInfo,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    },
    likeBlog:function(msg){
        return new Promise(function(resolve){
            mysql.find(sql.likeBlog,msg,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    }
}

router.js:

var promise = require("../MySQL/promise");
var url = require("url");
module.exports = function (app) {
    // Search box for fuzzy search app.get("/like",function(req,res){
        var likeurl=url.parse(req.url,true).query.link;
        async function getData(){
            var res1 = await promise.findTitle();
            var res5 = await promise.clickRank();
            var res11 = await promise.recommendInfo();
            var res21 = await promise.likeBlog("%"+likeurl+"%");
            var allres = {
                titleindex:0,
                navres:res1,
                rankres:res5,
                recommendres:res11,
                blogres:res21
            }
            return allres;
        }
        getData().then(function(result){
            res.render("like",result);
        });
    });
}

Note: Like blogres:res21 in the route and blogres:res10 in the home page, the data names rendered to the page must be consistent, here they are blogres

5. Effect display

Conduct a search:

Search results:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: