jQuery版本百度建議-有解無憂

<!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>
二、效果演示

百度建議效果圖
點擊進入：百度建議演示地址
只作為單一測驗demo，不做后續補充，有興趣的小伙伴可粘貼代碼自行完善，
標簽：jQuery，HTML，百度建議，&
更多演示案例，查看 案例演示
歡迎評論留言!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278877.html
標籤：其他
上一篇：JavaScript學習（五十九）—原型、原型鏈、閉包以及閉包的不足
下一篇：Qt開發經驗小技巧131-140
jQuery版本百度建議

目錄

內容介紹

一、直接上代碼

二、效果演示
