效果圖：

image.png

背景圖：

logo.png

CSS代碼：

                html{
            width: 100%;
            height: 100%;
        }
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }

        #search-box {
            width: 641px;
            height: 300px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 200px;
        }

        #search-form {
            font-size: 0px;

        }

        #logo {
            width: 270px;
            height: 129px;
            background-image: url('./logo.png');
            background-size: cover;
            margin: 0 auto;
            margin-bottom: 15px;
        }

        #search-input {
            width: 521px;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            padding: 9px 7px;
            border: 1px solid #b8b8b8;
        }

        #search-botton {
            width: 104px;
            height: 40px;
            border: 1px solid #38f;
            border-bottom: 1px solid #2e7ae5;
            background-color: #38f;
            color: #fff;
            font-size: 18px;
            position: relative;
            top: 2px;
            cursor: pointer;
        }

        #search-botton:hover {
            background-color: #377ad8;
        }

        #suggestions {
            width: 535px;
            border: 1px solid #d8d8d8;
            position: absolute;
            display: none;
        }

        #suggestions ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #suggestions li {
            font-size: 16px;
            height: 20px;
            line-height: 20px;
            padding: 3px 7px;
            cursor: pointer;
            background-color: #fff;
        }

        #suggestions li:hover {
            background-color: #f8f8f8;
        }

HTML代碼：

      <div id="search-box">
        <div id="logo"></div>
        <div id="search-form">
            <input type="text" id="search-input">
            <button id="search-botton">百度一下</button>
        </div>
        <div id="suggestions">
            <ul id="suggestion-wrap">
            </ul>
        </div>
    </div>

JS代碼，記得引入JQuery：

<script src="./jquery2.1.1.js"></script>
    <script>
        $('#search-input').keydown(function() {
             var text = $(this).val();
             $.ajax({
                url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + text + '&json=1&p=3&sid=20144_1467_19033_20515_18240_17949_20388_20456_18133_17001_15202_11615&req=2&csor=2&pwd=s&cb=jQuery110207612423721154653_1467355506619&_=1467355506623',
                type: 'GET',
                dataType: 'jsonp',
                jsonpCallback: 'jQuery110207612423721154653_1467355506619',
                success:function(data){
                    var data = data.s;
                    var lis = data.reduce(function (result, item) {
                        return result += '<li>' + item + '</li>'
                    }, '')
                    $('#suggestion-wrap').html(lis);
                    $('#suggestions').show().css({
                        top: $('#search-form').offset().top + $('#search-form').height() - 100+'px',
                        left: 0
                    });
                }
             })
        });
        $(document).click(function() {
            $('#suggestions').hide();
        });

        $('#suggestions').on('click', 'li', function() {
            window.location. + $(this).val();
        });

        $('#search-botton').click(function() {
            window.location. + $.trim($('#search-input').val())
        });

        $(document).keypress(function(e) {  
            // 回車鍵事件  
            if(e.which == 13) {  
                window.location. + $.trim($('#search-input').val())
                
            }  
        }); 
    </script>