JS封装模糊搜索小插件（简单易懂）

最新推荐文章于 2022-10-19 16:21:38 发布

水货——鲈鱼

最新推荐文章于 2022-10-19 16:21:38 发布

阅读量496

点赞数 1

文章标签： javascript css jquery

本文链接：https://blog.csdn.net/weixin_41162427/article/details/107797884

版权

模糊搜索效果

在这里插入图片描述

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊查询</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div>
    <div align="center">
        <input type="text" id="txt">
        <button type="button" id="btn">search</button>
    </div>
    <ul id="list" align="center">

    </ul>
</div>
<script src="./js/jquery-3.3.1.js"></script>
<script src="main.js"></script>
</body>
</html>

//style.css
*{
    list-style: none;
    padding:0;
    margin:0;
}

div{
    text-align: center;
    padding-top:20px;
}

ul{
    padding-top:20px;
    width:20%;
    margin:0 50% 0 38%;
}

li{
    padding:3px;
    border:1px solid silver;
    box-shadow: 1px 1px;
    border-radius: 4px;
    padding: 5px ;
}

input{
    border: 1px solid #ccc;
    padding: 7px 0px;
    border-radius: 3px;
    padding-left:5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

input:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

button{
    border: none;
    color: white;
    border-radius: 5px;
    font-family:Arial;
    padding: 8px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: #66afe9;
}

//main.js
jQuery.fn.extend({

    SearchContent:function(oBtn,oTxt,fruits,oList){
        renderFruits(fruits,oList);
        function renderFruits(list) {
            if (!(list instanceof Array)) {
                return;
            }
            oList[0].innerHTML = '';
            var len = list.length;
            var item = null;
            for (var i = 0; i < len; i++) {
                item = document.createElement('li');
                item.innerHTML = list[i];
                oList[0].appendChild(item);
            }
        }


        //筛选是否包含目标字符串
        function searchByIndexOf(keyWord, list) {
            if (!(list instanceof Array)) {
                return;
            }
            var len = list.length;
            var arr = [];
            for (var i = 0; i < len; i++) {
                if (list[i].indexOf(keyWord) >= 0) {
                    arr.push(list[i]);
                }
            }
            return arr;
        }

        //筛选是否包含目标字符串
        function searchByRegExp(keyWord, list) {
            if (!(list instanceof Array)) {
                return;
            }
            var len = list.length;
            var arr = [];
            var reg = new RegExp(keyWord);
            for (var i = 0; i < len; i++) {
                if (list[i].match(reg)) {
                    arr.push(list[i]);
                }
            }
            return arr;
        }
        oBtn[0].addEventListener('click',function(){
            var keyWord = oTxt[0].value;
            var fruitList = this.searchByRegExp(keyWord, fruits);
            this.renderFruits(fruitList);
        }, true);

        oTxt[0].addEventListener('keydown', function (e) {
            if (e.keyCode == 13) {
                var keyWord = this.oTxt[0].value;
                var fruitList = this.searchByRegExp(keyWord, fruits);
                this.renderFruits(fruitList);
            }
        }, true);

        var cpLock = false;
        oTxt.on('compositionstart', function () {
            cpLock = true;
            console.log("不搜索")
        });

        oTxt.on('compositionend', function () {
            cpLock = false;
            console.log("汉字搜索");
            var keyWord = oTxt[0].value;
            var fruitList = searchByRegExp(keyWord, fruits);
            renderFruits(fruitList);
        });

        oTxt.on('input', function () {
            if (!cpLock) {
                console.log("字母搜索")
                var keyWord = oTxt[0].value;
                var fruitList = searchByRegExp(keyWord, fruits);
                renderFruits(fruitList);
            }
        });
    }

})


var oTxt = $('#txt');
var oBtn = $('#btn');
var oList = $('#list');
var fruits = ["pick", "apple", "pair", "banana", "purple", "lemon", "orange", "strawberry", "s", "ssr"];

oTxt.SearchContent(oBtn,oTxt,fruits,oList)

在实现过程中，如果可以在jquery.fn.extend中直接实现函数的相互调用，而不是嵌套调用，可能会让代码更加简单易懂，但是我不太知道怎么实现这一步骤。

如果使用类方法，只能传递对象，不能传递节点，所以需要慎重

水货——鲈鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS封装模糊搜索小插件（简单易懂）

模糊搜索插件模糊搜索效果在实现过程中，如果可以在jquery.fn.extend中直接实现函数的相互调用，而不是嵌套调用，可能会让代码更加简单易懂，但是我不太知道怎么实现这一步骤。如果使用类方法，只能传递对象，不能传递节点，所以需要慎重模糊搜索效果//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模糊查询<
复制链接

扫一扫