使用JQuery轻松实现简单的输入框模糊查询功能

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天

今日份小故事分享

新年第一次开会！喜欢臭美的我打开相机，对着会议室对面投影里边的我拍了张照片，这个时候刚好大家都静了下来，只听见咔嚓一声，我懵了，这是忘记关闪光了，抬头迎上了老板的目光，转头一看，大家的目光都往我这扫！！！

SOS真的好射死！！！

老板会上说：同志们，从下个月开始人事要开始查考勤了哈！你们那些早上11点才慢悠悠过来上班的，下班就立马走的，之前就算了，现在开始，几点来，那就上满工时就才能撤。我懵懂的抬起头，SOS老板盯着我咋整，难道他知道我去年每周平均工时是5.6！OMG我得镇静，于是回了一个不失礼貌的微笑，慢慢将目光转移到别处。 整个会议下来，我只记住了，以后要带工牌，要起好早，不能睡懒觉了，wuwuwu........

言归正传，开始技术分享

今日份分享灵感来自去年做的一个叫天普的项目中的一个小知识点，输入框的模糊查询，说实话起初我也不会，甚至还因此掉了11根头发，好在我发量还行，这点头发还不心疼，hhhhhh.....

思路分析

1.需要一个input框用来搜索。

2.需要一个div用来展示搜索到的内容。

3.搜索需要获取当前输入框的内容与已经有的内容做判断，有则显示，没有则显示空，并提示没有搜索到相应内容。

怎么实现

①获取输入框的值，也就是你输入的内容。

②获取submit的属性，并添加点击onclik属性，这一步是关键一步，因为这是你在提交数据时，你提交的数据其实就是你在输入框中输入的内容，所对应的那一块数据。

③当你第二步结束，你拿到的数据就是你需要渲染到页面的数据，用for循环遍历下你搜索到的数据，并将其渲染到页面对应的内容区域就行。

HTML代码块

<div class="by">
    <div class="top_ipt">
        <input type="text" placeholder="请输入搜索内容" class="ipt">
        <div class="submit">确认</div>
    </div>
    <div class="content"></div>
 </div>

在过程中有用到滚动条，用scroll的时候，滚动条原本的样式很丑，所以想要改变原本的样式那就需要这样做！（如果也不想用原有的滚动条样式，拿走不谢！）

/*定义滚动条高宽、高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 0.75rem;
        height: 0.75rem;
    }
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0.375rem #343434;
    border-radius: 0.625rem;
    background-color: #343434;
    box-shadow: inset 0 0 0.375rem #808183;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0.375rem #fbfbfb;
    background-color: #fbfbfb;
}

CSS代码块

*{
    margin: 0;
    padding: 0;
  }
.by{
    width: 600px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #676e6e;
    overflow: hidden;
}
.top_ipt{
    display: flex;
    padding-top: 20px;
    justify-content: center;
    align-items: center;
}
.ipt {
    display: block;
    padding-left: 10px;
    width: 400px;
    height: 32px;
    font-size: 12px;
    color: rgb(0, 0, 0);
    border: none;
    border-radius: 6px;
    box-shadow: 0px 0px 5px 2px #897878;
}
.content {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 400px;
    margin-left: 20px;
    margin: 7px 5px;
    background: url(img/tu1.png) no-repeat;
    background-size: contain;
}
.content p{
    margin-bottom: 10px;
    font-size: 12px;
    color: #00ff29;
    font-weight: 500;
    padding-left: 10px;
}
.content p:first-child{
    padding-top: 12px;
}
.submit {
    margin-left: 15px;
    color: red;
    font-weight: 700;
    border: 3px solid #ee4e4e;
    background: #f6ffdd;
    border-radius: 16px;
    width: 45px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}
.noTitle{
    text-align: center;
    font-size: 20px;
    color: #ee4e4e;
    font-weight: 700;
}

JS代码块

$(function(){
    var items = [
        {"title":"111111"},
        {"title":"1123151"},
        {"title":"098117631313"},
        {"title":"嘻嘻哈哈哈"},
        {"title":"我不傻，只是有点不聪明"},
        {"title":"骗感情可以，骗钱锤死你"},
        {"title":"每天别总想吃饭睡觉打豆豆"}
    ]
    var submit = $('.submit');
     change(items)
     submit.click(function(){
        let ipt = $('.ipt').val();
        let newArr = [];
        for(let i=0;i<items.length;i++) {
            for(let k in items[i]){ 
                console.log(k);
                if(items[i][k].indexOf(ipt) > -1) {
                    newArr.push(items[i]);
                    break;
                    }
                }
            }
            change(newArr)
        })
    function change(a) {
        let str = '';
        if(a != ''){
            for ( let i=0; i<a.length; i++) {
                str += `<p>${a[i].title}</p>`;
        }
        $('.content').html(str)
        }else{
            $('.content').html('<div class="noTitle">没有查到对应内容哦！</div>')
        }
    }
})

页面展示：

###### 当搜索全部时；注意看滚动条

当搜索只有部分时

当没有搜索到时

数据是当然是前端自己模拟的啦，毕竟如果是接入后台数据的话，就得$ajax()写法介入了！

虽然还是个开发小菜鸡，但是敬每天努力成长的自己！????

开放萌新报到，各位看官请多指教????????????????????