纯js实现搜索框自动补全

最新推荐文章于 2024-06-19 15:36:55 发布

中南滴水哥

最新推荐文章于 2024-06-19 15:36:55 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： html css js web javascript

本文链接：https://blog.csdn.net/qq_43742385/article/details/111567570

版权

前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

纯js实现搜索框自动补全

开发语言：HTML+CSS+JS
编辑器：VSCode
构建思路：建立两个div,一个用于输入和搜索，一个用于展示，用于展示的初始状态为隐藏的。后面当有键盘输入事件时就显示，遍历数组，如果找到了我们要输入的就将其加入到展示的div里面，如果搜索框失去焦点就清空。
界面展示：
项目完整代码：

<!--
 * @Author: CSU_XZY
 * @Date: 2020-12-22 20:43:12
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-12-22 21:28:48
 * @FilePath: \第二天c:\Users\XZY\Desktop\前端\JavaScript\JS实战案例\3、搜索框\autoSearch.html
 * @Description: just to play
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        height: 400px;
        width: 400px;
        margin: 20px auto;
    }
    .search{
        width: auto;
        height: 45px;
        margin-bottom: 0px;
    }
    .show{
        display: none;
        margin-top: 0px;
        height: 300px;
        width: 250px;
        border: #eee solid 1px;
        overflow: scroll;
    }
    #val{
        padding-left: 20px;
        height: 40px;
        width: 230px;
    }
    #sub{
        height: 40px;
        width: 80px;
    }
    .show p{
        margin-top: 0px;
        margin-bottom: 0px;
        color: grey;
        padding-left: 15px;
    }
</style>
<body>
    <div class="box">
        <div class="search">
            <input type="text" id="val" placeholder="请输入关键字">
            <input type="submit" id="sub">
        </div>
        <div class="show" id = "show">
            <P>sb</P>
            <p>sb</p>
        </div>
    </div>
</body>
</html>
<script>
    var array = ["熊卓颖","罗铭","罗屌","段景伟","段晶伟","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿",
    "胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿","胡邓懿"];
    var val = document.getElementById('val');
    var sub = document.getAnimations('sub');
    var show = document.getElementById('show');

    
    val.onkeyup = function(){
        show.style.display = 'block';

        var str = '';
        for(let i = 0; i < array.length; i++)
        {
            if(array[i].indexOf(val.value) != -1)
                str += "<p>"+array[i]+"</p>";

        }
        if(!val.value || !str)
            show.innerHTML = "<p>没有这样东西</p>";
        else
            show.innerHTML = str;

        var arrayList = show.getElementsByTagName("p");
        for(let i = 0; i < arrayList.length; i++)
        {
            arrayList[i].addEventListener('click',function(){
                alert(arrayList[i].innerText)
            });
        }   
    }


    val.onblur = function(){
        var t = 5;
        setInterval(()=>{
            t--;
            if(t==0)
            {
                show.style.display = 'none';
                val.value = "";
            }
        },(1000))
    }
    
</script>

中南滴水哥

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
纯js实现搜索框自动补全

纯js实现搜索框自动补全开发语言：HTML+CSS+JS编辑器：VSCode构建思路：建立两个div,一个用于输入和搜索，一个用于展示，用于展示的初始状态为隐藏的。后面当有键盘输入事件时就显示，遍历数组，如果找到了我们要输入的就将其加入到展示的div里面，如果搜索框失去焦点就清空。界面展示：项目完整代码：<!-- * @Author: CSU_XZY * @Date: 2020-12-22 20:43:12 * @LastEditors: CSU_XZY * @LastEdit
复制链接

扫一扫

专栏目录