Node实现搜索框进行模糊查询

2024-12-15 18:57:36

本文实例为大家分享了Node实现搜索框进行模糊查询的具体代码，供大家参考，具体内容如下

一、需求

点击导航栏中的搜索图，出现搜索框，从而进行文章的模糊查询

二、建表

1.blog表

添加外键：

2.nav表

3.type表

4.user表

三、页面及样式

like.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询</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="请输入关键字词">
        <input type="submit" value="搜索">
        <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数据

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){
    // 搜索框进行模糊查找
    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);
        });
    });
}

注：like 路由中的blogres:res21和首页中的blogres:res10,所渲染到页面中的数据名称需一致，在此均为 blogres

五、效果展示

进行搜索：

搜索结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Node.js对MongoDB数据库实现模糊查询的方法

前言模糊查询是数据库的基本操作之一,实现对给定的字符串是否与指定的模式进行匹配.如果字符完全匹配,可以用=等号表示,如果部分匹配可认为是一种模糊查询.在关系型数据中,通过SQL使用like '%fens%'的语法.那么在mongodb中我们应该如何实现模糊查询的效果呢. 目录 mongodb模糊查询 nodejs通过mongoose的模糊查询 1. mongodb模糊查询我们打开mongodb,以name文字字段进行测试. 精确查询当{'name':'未来警察'}时,精确匹配到一条记录.
node.js基于mongodb的搜索分页示例

mongodb模糊查询并分页 1.建立数据库代码如下: var mongoose = require('mongoose'); var shortid = require('shortid'); var Schema = mongoose.Schema; var IndexDataSchema = new Schema({ _id: { type: String, unique: true, 'default': shortid.generate }, type: String, city:
Node实现搜索框进行模糊查询

本文实例为大家分享了Node实现搜索框进行模糊查询的具体代码,供大家参考,具体内容如下一.需求点击导航栏中的搜索图,出现搜索框,从而进行文章的模糊查询二.建表 1.blog表添加外键: 2.nav表 3.type表 4.user表三.页面及样式 like.ejs: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n
JS实现微信弹出搜索框多条件查询功能

效果图如下所示: JS实现微信弹出搜索框多条件查询功能的实现代码如下所示:  <!DOCTYPE html> <
JavaScript实现百度搜索框效果

最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容界面: 界面html代码: <!DOCTYPE html> <
Mybatis 实现一个搜索框对多个字段进行模糊查询

1.问题描述: 最近项目需要提供一个搜索框对多个字段进行模糊查询的操作代替下拉列表选择单个字段条件进行模糊查询的操作. 2.解决办法: 之前的四个条件的模糊查询代码 <if test="featureCode != null"> AND plm_model_option.feature_code= #{featureCode} </if> <if test="featureName != null"> AND plm_featur
PHP中模糊查询并关联三个select框

1.在php中我们经常用到下拉框,并相互关联,如果下拉框的option非常多,那么我们就要用到模糊搜索功能,那么怎么做呢? 在此功能中,走了弯路,最好不要关联两个select的id值后select属性选中,并不可修改.再次选择的时候去除属性,这样在去除select属性的时候存在火狐和google js兼容的问题.很容易出现不对应或者属性不能去除的情况,且功能麻烦.另外在后台一定要判断两者的对应关系.(在后台比对两者的对应关系的时候,要去数据库查询,找到企业的id,去数据库查询担保公司的id比对.
Angular实现下拉框模糊查询功能示例

本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"
Element-ui 自带的两种远程搜索(模糊查询)用法讲解

问题描述有一种查询叫做前端远程搜索.模糊查询.饿了么自带两种方式可以做,一种是使用el-input中的el-autocomplete,另一种是使用el-select和el-option.这两种都可以选择,但是具体实现的思路方式要和后端商量.模糊查询是谁来做? 如果后端做那么前端只需要把用户在输入框中的输入的关键字扔给后端,后端根据前端传过来的用户要查询的关键字,去数据库中进行模糊查询,查到的关联的数据扔给前端,前端拿到数据以后直接呈现给用户看到就行了.前端省事些如果前端做正常情况下,模糊
php实现按天数、星期、月份查询的搜索框

本文实例为大家分享了php实现按天数.星期.月份查询的搜索框,搜索时候展示数据的统计图,主要展示图形的效果,供大家参考,具体内容如下 1.ajax.php <?php $year = $_GET['y']; if(!isset($_GET['m'])){ $month=1; }else{ $month = $_GET['m']; } $week_arr = getMonthWeekArr($year, $month); echo json_encode($week_arr); die; /**
JS Select下拉框(支持输入模糊查询)

本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <Script Language="Javascript"> f
Select下拉框模糊查询功能实现代码

select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY > <S