fuse实现input输入框搜索建议模糊搜索效果-html代码-BFW代码库

fuse实现input输入框搜索建议模糊搜索效果

代码语言：html

所属分类：搜索

代码描述：fuse实现input输入框搜索建议模糊搜索效果

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

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

<head>

    <meta charset="UTF-8">


    <style>
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap");
        body {
            font-family: 'Raleway', sans-serif;
            font-size: 15px;
        }

        .search-names {
            padding: 1em 2em;
            width: 250px;
            background: #eee;
            display: inline-block;
            margin: auto;
            line-height: 1.6;
        }
        .search-names h3 {
            margin-bottom: 0;
        }
        .search-names a {
            color: #1da1f2;
        }

        .form-element {
            max-width: 900px;
            margin: auto;
            margin-top: 4em;
        }
        .form-element input {
            width: calc(100% - 19px);
            height: 45px;
            border: none;
            border-bottom: 1px solid #222;
            outline: none;
            margin: 0;
            padding-left: 18px;
            font-size: 40px;
            padding-bottom: 0.4em;
        }

        .query-filter {
            position: relative;
        }

        .auto-complete {
            position: absolute;
            top: 100%;
            width: 100%;
            background: #fff;
        }
        .auto-complete__options {
            display: none;
            border: 1px solid #ddd;
            padding: 1.6em 18px;
            margin: 0;
            list-style-type: none;
        }
        .auto-complete__options li {
            margin-bottom: 1.5em;
            font-size: 1.1em;
        }
        .auto-complete__options li:last-of-type {
            margin-bottom: 0;
        }

        .form-element.active .auto-complete__options {
            display: block;
        }
    </style>


</head>

<body translate="no">
   

    <div class="form-element">
        <form action="" autocomplete="off&.........完整代码请登录后点击上方下载按钮下载查看