基于数据库的JavaScript前后台模糊查询，后台是node.js

        模糊查询在很多实时都是很实用的，下面我就给大家写了模糊查询，还是之前的写作习惯，先写前端代码，在写后台代码。

先上一个效果图

前端代码

先写HTML，这是基本部分，不是全局的，就一个搜索按钮和一个输入框

<input type="text" name="seek" class="seek" placeholder="公司名称"/>
<input type="submit" value="搜索" class="seek_button btn btn-default" style="margin-top: -7px;"/>
<!--搜索显示-->
<div id="moseek" class="hidden">
    <ul></ul>
</div>

CSS代码主要是输入框和按钮还有显示的结果布局，这里仅仅展示显示结果的css吧

#moseek{
    width: 200px;
    position: absolute;
    left: 20px;
    background: #D8F5F5;
}
#moseek>ul{
    width: 100%;
}
#moseek>ul>li{
    color: #0000CC;
}
#moseek li:hover{
    background: #F3F50B;
}

JavaScript代码

    首先需要个做两部分ajax请求，一个是对输入框，每输入一个字符时就需要发送一个ajax请求，一个是当点击搜索按钮时发生的ajax请求

先来搜索按钮的请求

主要处理将搜索出来的结果显示在一个模态框之上，不太重要

//搜索功能
$(".seek_button").click(function(){
    var seek_result=$(".seek").val();
    $("#moseek").addClass("hidden");
    if(seek_result!=''){
        $.ajax({
            type:"post",
            url:"/admin/seek",
            async:true,
            data:{
                "seek":seek_result
            },
            success:function(data){
                if(data.result==1){
                    //弹出来一个模态框并附带修改和删除操作
                    $("#blindstroy").addClass("show");
                    $("#seet_result").removeClass("hidden");
                    $(".seek").val('');//将输入框清空
                    $(".pge_r").text('');//清空里面的内容
                    for(var i=0;i<data.data.length;i++){
                        $(".pge_r").append("<tr><td><input type='checkbox'/></td><td></td><td><button class='btn recompose btn-info dete_alter'>修改</button><button class='t_delete btn btn-warning'>删除</button></td></tr>");
                        var com_name=data.data[i].company_name.substring(0,25);//截取25个字符
                        $(".pge_r>tr:eq("+i+")>td:eq(1)").text(com_name);
                        $(".pge_r>tr:eq("+i+")>td:eq(2)>button").attr("data-id",data.data[i].ID);
                    }
                }else{
                    alert("暂无此公司")
                }
            }
        });
    }
})

下面是对输入框的实时监听，并发送请求

//可以尝试做一个模糊查询
$('.seek').bind('input propertychange', function(){
    //获取输入的内容
    var sr=$(".seek").val();
    //方式ajax
    if(sr!=''){
        $.ajax({
            type:"post",
            url:"/admin/seekMhu",
            async:true,
            data:{"seek":sr},
            success:function(data){
                if(data.result==1){//查到类似的
                    $("#moseek").removeClass("hidden");
                    $("#moseek>ul").text('');//清空之前的
                    for(var i=0;i<data.data.length;i++){
                        $("#moseek>ul").append("<li>"+data.data[i].company_name+"</li>")
                    }
                    //为添加的li绑定事件
                    $("#moseek>ul>li").on("click",function(){
                        $(".seek").val($(this).text());//将点击的内容填入里面
                        $("#moseek").addClass("hidden");
                    })
                }
            }
        });
    }	
});

这是将请求的数据放入input输入框的下面，并给每一行添加一个鼠标移到和对每一行的监听，一旦选中就将内容填入到input中，不足之处，没有对相同字符做颜色上的处理

后台代码

1，主控制器

//所有的控制器
var detection=require('./route/admin/detection_site.js');//引入检测站点的js控制器
//对请求的处理
server.post("/admin/seek",detection.deteSeek);//处理搜索并返回搜索结果
server.post("/admin/seekMhu",detection.moheSeek);//实时处理模糊查询

2，具体的操作步骤

//处理搜索结果
exports.deteSeek=function(req,res){
    var seek=req.body.seek;
    db.query(`SELECT ID,company_name from detection_site where company_name='${seek}'`,(err,data)=>{
        if(err){
            console.error(err);
            res.status(500).send('database error').end();
        }else{
            res.json({"result":1,"data":data});
        }
    })
}
//处理模糊查询
exports.moheSeek=function(req,res){
    var seek=req.body.seek;
    db.query(`SELECT company_name from detection_site where company_name like '%${seek}%'`,(err,data)=>{
        if(err){
            console.error(err);
            res.status(500).send('database error').end();
        }else if(data[0]==null){
            res.json({"result":-1});
        }else{
            res.json({"result":1,"data":data});
        }
    })
}

两个搜索都可以直接拿到，想要的数据，所以不需要做什么过多的数据库的连表，对数据的处理等一系列的问题。

到这里基本完成了，最后上一张全面一点的图

搜索结果个图

到这里基本完成了，如果有问题你可以自己尝试的解决一下，一个问题不大。

最后希望大家也可以帮我解决一下，让搜索的相同字的颜色变暗，没搜索的变其他颜色，就是形成对比比如像类似这样的

谢谢你的观赏。