js实现输入框模糊匹配多个字段查找功能-html代码-BFW代码库

js实现输入框模糊匹配多个字段查找功能

代码语言：html

代码描述：js实现输入框模糊匹配多个字段查找功能

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #eee;
            font-family: sans-serif;
            margin: 0;
        }

        .container {
            background-color: #fff;
            border: solid 1px #ccc;
            margin: 2em;
            padding: 1em;
            width: 500px;
        }
        .container .text-filter {
            border: solid 1px #ccc;
            box-sizing: border-box;
            font: inherit;
            margin-bottom: .5em;
            padding: .25em .5em;
            width: 100%;
        }
        .container ul {
            border: solid 1px #ccc;
            list-style: none;
            margin: 0;
            overflow: auto;
            padding: 0;
        }
        .container ul li {
            padding: .25em .5em;
        }
        .container ul li:nth-child(odd) {
            background-color: #eee;
        }
        .container ul li span {
            display: inline-block;
            text-transform: uppercase;
            width: 10em;
        }
        .container .count-message {
            color: #999;
            text-align: right;
        }

        .blog {
            bottom: 1em;
            font-size: .75em;
            position: absolute;
            right: 1em;
        }

    </style>


</head>

<body>

    <div class="container">
        <input type="text" class="text-filter" placeholder="Type to filter...">
        <ul class="list">
            <!-- each generated <li> in this format -->
            <!--
                  <li>
                    <label>
                      <span class="name">sj7efjjd1a</span>
                      <span class="type">9dnakdie7w</span>
                      <span class="category">lo9ab6ehs8</span>
                    <label>
                  </li>
                -->
        </ul>
        <p class="count-message"></p>
    </div>

    <script>
        console.clear();

        (function() {

            var list = [],
            filteredList = [],
            maxDisplayLimit = 10,
            textInput = document.querySelector('.text-filter'),
            displayList = document.querySelector('.list'),
            countMessage = document.querySelector('.count-message');

            function generateDummyList(itemCount) {
                if (!itemCount) return;
                for (var i = 0; i < itemCount; i++) {
                    var item = {
                        name: Math.random().toString(36).substr(2, 10),
                        type: Math.random().toString(36).substr(2, 10),
                        category: Math.random().toString(36).substr(2, 10)
                    };
                    list.push(item);
                .........完整代码请登录后点击上方下载按钮下载查看