jQuery版本百度建议

人间小美味695

已于 2022-11-19 23:27:49 修改

阅读量558

点赞数 5

于 2021-04-21 09:55:06 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115908633

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 7 订阅

订阅专栏

jQuery

10 篇文章 1 订阅

订阅专栏

<!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>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search-wp {
            width: 500px;
            margin: 50px auto;
        }
        
        .search-wp>.search-common>input,
        button {
            width: 80%;
            height: 40px;
            outline: none;
            line-height: 40px;
            box-sizing: border-box;
            float: left;
        }
        
        .search-wp button {
            width: 20%;
            border: 0px;
            background: skyblue;
            border-radius: 0px 5px 5px 0px;
        }
        
        .search-wp>.search-common::after {
            content: '';
            clear: both;
            display: block
        }
        
        .search-wp>.search-content {
            width: 80%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            display: none;
        }
        
        .search-wp>.search-content li {
            list-style: none;
            height: 35px;
            line-height: 35px;
            border: 1px solid #ccc;
        }
        
        .search-wp>.search-content li.on {
            background-color: darkslateblue
        }
        
        .web-wp {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        
        iframe {
            width: 800px;
            height: 500px;
            border: 1px solid blue;
            position: absolute;
            top: 200px;
        }
    </style>
</head>

<body>
    <div class="search-wp">
        <div class="search-common">
            <input type="text" placeholder="请输入搜索内容">
            <button>开始 搜索</button>
        </div>
        <div class="search-content">
            <ul>
            </ul>
        </div>
    </div>
    <div class="web-wp">
        <iframe src="" frameborder="0" scrolling="no"></iframe>
    </div>
    <script>
        // 百度建议：

        $('.search-wp input[type=text]').on('keyup', ongetContnetEvent)
            // input输入框绑定键盘事件ongetContentEvent
        function ongetContnetEvent(e) {

            let val = $(this).val();
            // 获取input框中的值
            if (val == '') {
                $('.search-wp .search-content').hide()
                return
                // 如果input框中无值，content中的搜索内容不显示
            }
            // 点击回车按钮进行跳转，提取class为on值的li标签内容，作为location.href值
            if (e.keyCode == 13) {
                let val = $('.search-wp ul li.on').html()
                    // location.href = `https://www.baidu.com/s?wd=${val}`
                let iframeHref = `https://www.baidu.com/s?wd=${val}`
                if (!iframeHref) {
                    $('iframe').attr('src', 'https://www.baidu.com')
                } else {
                    $('iframe').attr('src', iframeHref)
                }

            }

            if (e.keyCode == 38 || e.keyCode == 40) {
                let index = $('.search-wp ul li.on').index()
                    // 获取class值为on的索引值
                if (e.keyCode == 38) {
                    --index
                    // 点击向上方向键时，索引值减小
                } else {
                    index = ++index % $('.search-wp ul li').length;

                }
                $('.search-wp ul li')
                    .eq(index).addClass('on')
                    .siblings('.on')
                    .removeClass('on');
                // 对应索引值的li添加on值，同级元素中有on值的删除class
                $('.search-wp input').val($('.search-wp ul li.on').html())
                    // 将class值为on的文本添加至input框
                return
            }
            getData(val)
        }

        function getData(val) {
            $.get("https://www.baidu.com/sugrec?cb=?", {
                    prod: 'pc',
                    wd: val
                },
                function(res) {
                    if (!Object.keys(res).length)
                    // 返回值response中无内容的，直接返回
                        return
                    res.g = res.g || [];
                    console.log(res.g)
                        // res.g有内容的使用原内容，无内容的赋值空数组，防止传值报错
                    $('.search-wp ul')
                        .html(renderSearchList(res.g))
                        .parent()
                        .slideDown()
                        // 将渲染值动态添加至ul中，其父级.search-content及内容显示
                },
                "json")
        }

        function renderSearchList(data) {

            if (data.length === 0) {
                return ('<li class="">查询无结果</li>')
            } else {
                return data.map((item, index) => {
                    return `<li class="${index==0?'on':''}">${item.q}</li>`
                }).join('')
            }
            // res.g传参，无内容的显示“无查询结果”，有内容的将数组中的每项值遍历转为字符串
        }
    </script>
	<script>
        console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
    </script>
</body>

</html>