输入框模糊搜索功能实现js

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.min.js"></script>
        <style>
            .selectCity {
                /*//空样式，只用来标记行 */
            }
            
            .sousuo {
                background-color: #1bffed;
            }
        </style>
    </head>

    <body>
        <li>
            <label>名称：</label>
            <input type="text" id="selectByName" name="selectByName" value="" placeholder="请输入名称搜索......" />
            <p>
                <a href="javascript:void(0);" class="selectCity-all">全部</a>
                <a href="javascript:void(0);" class="selectCity" value="xzz">小猪猪</a>
                <a href="javascript:void(0);" class="selectCity" value="glxq">咖喱小气</a>
                <a href="javascript:void(0);" class="selectCity" value="qtds">齐天大圣</a>
                <a href="javascript:void(0);" class="selectCity" value="mm">发抖的小喵咪</a>
                <a href="javascript:void(0);" class="selectCity" value="mm">aaa</a>
            </p>
        </li>
    </body>
    <script type="text/javascript">
        $("body").undelegate("#selectByName", "keyup").delegate("#selectByName", "keyup", function() {

            var theName = $(this).val().replace(/\s+/g, "");
            if(theName.length > 0) { //theName .length > 0 代表输入了theName值
                //遍历要搜索的列表
                $(this).next().find(".selectCity").each(function() {
                    if($(this).html().indexOf(theName) > -1) {
                        //如果包含搜索内容，则添加底色样式
                        $(this).addClass("sousuo");
                    } else {
                        $(this).removeClass("sousuo");
                    }
                });
            } else { //否则 代表没输入theName值，全部去除底色
                $(this).next().find(".selectCity").each(function() {
                    $(this).removeClass("sousuo");
                });
            }
        });
    </script>

</html>
输入框模糊搜索功能实现js

推荐阅读更多精彩内容
