搜索框的实现

Posted 2021-01-23 lanhuo666

 

参考博文：https://www.jianshu.com/p/200561e45518

一、设计基本样式：

原生html和css实现：

<div id="show">
    <div class="search_img">
        <img src="./img/baidu.PNG" alt="百度" title="百度">
    </div>
    <div class="searchDiv">
        <input type="text" class="kw" name="keyword">
        <button class="searchButton" type="submit"><a href="" id="go">搜索</a></button>
        <div class="search_result">
            <ul> </ul>
        </div>
    </div>
</div>

 

<style>
    div.search_img{
        text-align: center;
    }
    img{
        margin: 100px auto;
    }
    div.searchDiv{
        background-color: #029ae5;
        width: 700px;
        margin: 1px auto;
        padding: 1px;
        height: 40px;
        display: block;

    }
    div.searchDiv input{
        width: 575px;
        border: 1px solid transparent;
        height: 34px;
        margin: 1px;
        outline:none;
    }
    div.searchDiv button{
        width: 110px;
        border: 1px solid transparent;
        background-color: #029ae5;
        font-size: 20px;
        font-weight: bold;
    }
    #go{
        color: white;
        text-decoration: none;
    }
    /*下拉框样式设置*/
    .search_result{
        border: #029ae5 1px solid;
    }
    ul{
        padding: 0;
        margin: 0;
    }
    li{
        line-height: 20px;
        font-size: 14px;
        cursor:pointer;
        box-sizing: border-box;
        padding:0 5px;
        list-style-type: none;
    }
    li:hover{
        background-color: rgb(230,230,230);
    }
    li>a{
        text-decoration: none;
    }
</style>

 

 

结果如下

 

 

 二：javascript编写

提示：在这里直接调用百度api的接口

$(document).ready(function () {
    $(".search_result").hide();
    $(".kw").keyup(function () {
        if ($(".kw").val() == ""){
            $("li").remove();
            $(".search_result").hide();
            return;
        } else {
            var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$(".kw").val();
            querySUG(url);
        }
    });
})
    function querySUG(url) {
        $("li").remove();
        $.ajax({
            type:"get",
            async:true,
            url:url,
            dataType:"jsonp",
            jsonp:"cb",
            jsonpCallback:"callback",
            success:function(data){
                data.s.forEach(function (el) {
                    var lis = document.createElement("li");
                    lis.innerHTML="<a href=‘https://www.baidu.com/s?wd="+el+"‘>"+ el+"</a>";
                    $(".search_result > ul").append(lis);
                })
                $(".search_result").show();
            },error:function() {
                console.log(‘fail‘);
            }
        });
    }

 

 这里实现的功能是当输入相应的关键词，会出现相应的下拉框中的提示词，鼠标点击相应的关键词，会跳转到相应的搜索页面。至此简单的搜索框功能就实现了。

但是！

联系实际需求：我们更需要通过键盘的上下移动和enter键控制实现跳转页面！

 尚待完善，后续会持续更新！！