前端列表筛选效果


<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
    style>
head>
<body>
<input type="text">
<ul>
    <ol>0ol>
    <ol>01ol>
    <ol>012ol>
    <ol>0123ol>
    <ol>01234ol>
    <ol>012345ol>
    <ol>0123456ol>
    <ol>01234567ol>
    <ol>012345678ol>
    <ol>0123456789ol>
    <ol>0123456789ol>
ul>
<script type="text/javascript" src="jquery-3.0.0.min.js">script>
<script>
    $(function () {
        $("input").change(function () {
            var val = $(this).val();
            if (!val) {
                $("ol").slideDown();
                return;
            }
            var $showOl = $("ol:contains(" + val + ")")
            $("ol").not($showOl).slideUp();
            $showOl.slideDown();
        }).keyup(function () {
            $(this).change();
        });
    });
script>
body>
html>

你可能感兴趣的:(前端,jquery,前端)