模仿搜索框搜索提示案例笔记分享

最新推荐文章于 2022-12-01 20:47:05 发布

努力的豌豆芽

最新推荐文章于 2022-12-01 20:47:05 发布

阅读量239

点赞数 1

文章标签： js html jquery

本文链接：https://blog.csdn.net/qq_44758643/article/details/108467847

版权

搜索提示框效果

本案例是一个类似百度搜索时输入内容后在搜索框下按照搜索内容显示出相关搜索提示的效果需要用到的技术是ajax和jQuery

大概效果如下

第一步：搭建基本HTML

主要由一个文本框和一个提示框组成

文本框为input标签

提示框为ur包含lu标签

基本效果如下

**注意：**后边需要先把提示框隐藏
在这里插入图片描述

代码如下

body中的

 
<div class="container">
        <!-- 搜索框 -->
        <input type="text" id="sreach">
        <!-- 提示框 -->
        <div class="alert">
            <ul>
                <li>前端开发</li>
                <li>前端课程</li>
                <li>web前端</li>
            </ul>
        </div>
    </div>

css代码

<style>
        .container #sreach {
            width: 300px;

        }

        .container .alert {
            width: 300px;
            border: 1px solid lightgray;
            display: none;
        }

        .container .alert ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>

第二部分编写js代码

当然需要提前导入jQuery库

第一步：捕捉用户数据
第二部：获取json数据
第三部：用户开始输入时显示提示框，按照用户的输入数据与json中的name对比使得json中的name包含用户的数据则进行下一步操作
第四部：遍历获取对应name对象中的value值
第五步：将value的值更新到页面中
第六步：在用户敲击键盘时在页面中情况之前更新的数据
第七部：设置失去焦点时改为隐藏提示框

js代码：

    <script src="jquery-3.5.1.js"></script>
    <script>

        /*
        捕获用户输入行为
        1.绑定事件->keydown，keyup和可以press
        2.输入事件->input
        */
        //给搜索框绑定键盘输入事件
        $('#sreach').bind('input', function () {
            //删除之前的数据
            $('.alert>ul').empty();
            //1.根据用户和输入的内容动态获取相关数据
            var inputValue = $(this).val();
            
            $.getJSON('data/sever4.json', function (data) {
                //遍历json数据
                $.each(data, function (index, obj) {
                    //获取name
                    var name = obj.name;
                    //判断name值包含输入的值
                    if (name.indexOf(inputValue) >= 0) {
                        //获取value值
                        var value = obj.value;
                        // 遍历value值
                        $.each(value, function (index, text) {
                            //将每个value值添加到文本框
                          $('.alert>ul').append($('<li>'+text+'</li>'))
                        })
                    }
                })
            });
            //2.将提示框从隐藏状态改为显示状态
            $('.alert').css('display', 'block');
            //如果失去焦点将提示框改为隐藏
        }).bind('blur',function(){
            $('.alert').css('display', 'none');
            })

    </script>

json数据：

[{
    "name":"java",
    "value":[
        "java","javascript","javascript权威指南","java官方文档"
    ]
    
},

{
    "name":"成果",
    "value":[
        "诸葛大力","成三岁","铁憨憨","爱情公寓"
    ]
   
},
{
    "name":"周淑怡",
    "value":[
        "人均暗恋周淑怡","水龙姐","职业赛场说牛皮","周淑怡与药水哥"
    ]
}
]

完成后的效果：

完整代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索提示框效果</title>
    <style>
        .container #sreach {
            width: 300px;

        }

        .container .alert {
            width: 300px;
            border: 1px solid lightgray;
            display: none;
        }

        .container .alert ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 搜索框 -->
        <input type="text" id="sreach">
        <!-- 提示框 -->
        <div class="alert">
            <ul>
                <li>前端开发</li>
                <li>前端课程</li>
                <li>web前端</li>
            </ul>
        </div>
    </div>


    <script src="jquery-3.5.1.js"></script>
    <script>

        /*
        捕获用户输入行为
        1.绑定事件->keydown，keyup和可以press
        2.输入事件->input
        */
        //给搜索框绑定键盘输入事件
        $('#sreach').bind('input', function () {
            //删除之前的数据
            $('.alert>ul').empty();
            //1.根据用户和输入的内容动态获取相关数据
            var inputValue = $(this).val();
            
            $.getJSON('data/sever4.json', function (data) {
                //遍历json数据
                $.each(data, function (index, obj) {
                    //获取name
                    var name = obj.name;
                    //判断name值包含输入的值
                    if (name.indexOf(inputValue) >= 0) {
                        //获取value值
                        var value = obj.value;
                        // 遍历value值
                        $.each(value, function (index, text) {
                            //将每个value值添加到文本框
                          $('.alert>ul').append($('<li>'+text+'</li>'))
                        })
                    }
                })
            });
            //2.将提示框从隐藏状态改为显示状态
            $('.alert').css('display', 'block');
            //如果失去焦点将提示框改为隐藏
        }).bind('blur',function(){
            $('.alert').css('display', 'none');
            })

    </script>

</body>

</html>

努力的豌豆芽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
模仿搜索框搜索提示案例笔记分享

搜索提示框效果本案例是一个类似百度搜索时输入内容后在搜索框下按照搜索内容显示出相关搜索提示的效果需要用到的技术是ajax和jQuery大概效果如下第一步：搭建基本HTML主要由一个文本框和一个提示框组成文本框为input标签提示框为ur包含lu标签基本效果如下**注意：**后边需要先把提示框隐藏[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pQco1ZRw-1599546231604)(https://s1.ax1x.com/2020/09/08/wM
复制链接

扫一扫