用JavaScript写一个简易的自动搜索框

千帆过尽皆不是

已于 2024-06-29 12:02:56 修改

阅读量1.3k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：笔记

于 2024-06-28 13:39:22 首次发布

本文链接：https://blog.csdn.net/qq_52530691/article/details/137770584

一. HTML 部分代码及代码解释

HTML 中需要注意的是，JavaScript 的引用的位置。JavaScript的位置引用不合适可能会导致代码报错，或者 JavaScript 获取到的内容为空。所以 JavaScript 一般引用在代码最下面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>

    <!-- 链接 index.css 页面 -->
    <link rel="stylesheet" href="index.css"> 
</head>
<body>
    
    <div class="search" id="search">

        <!-- 搜索框 -->
        <div class="search-top" id="search-top">
            <input type="text" id="search-input" placeholder="请输入" value="" oninput="myScript()">
        </div>

        <!-- 数据展示 -->
        <div class="search-content" id="search-content">

            <ul class="ul" id="ul">

            </ul>
        </div>
    
    </div>

</body>