效果图

放大镜：

照相机：

代码

css

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 546px;
        height: 32px;
        border: 2px solid #e2231a;
        position: relative;
        margin-left: 20px;
    }
    .box input{
        border: 0;
        outline: none;
        padding: 2px 44px 2px 17px;
        height: 28px;
        width: 380px;
    }
    .box span{
        display: inline-block;
        background: url(img/zhaoxiangji.png) no-repeat;
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        position: relative;
        top: 6px; /* 垂直居中，算出来的，(div高度32 - span高度20) /2 */
    }
    .box > button{
        background-color: #e1251b;
        border: 0;
        width: 58px;
        height: 32px; /*与外部div高度相同*/
        position: absolute;
        right: -1px;
        cursor: pointer
    }
    .box > button > i{
        display: inline-block;
        background: url(img/fangdajing2.png) no-repeat;
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
    }
    .search-helper{
        display: none;
        position: absolute;
        border: 1px solid #ccc;
        width: 488px;
        font-size: 12px;
        list-style-type: none;
        left: -2px;
        cursor: pointer;
        background-color: #fff;
    }
    .search-helper li{
        height: 25px;
        line-height: 25px;
        padding: 0 5px;
    }
</style>

js：

window.onload = function(){
    var resouArr = ["iphone13","huawei mate40","拯救者y7000"]
    var dataArr = ["iphone13","iphone12","iphone11","huawei mate40","huawei p40","小米12","小米10"]
    document.getElementById("search").oninput  = function(e){
        // console.log(this.value)
        document.getElementsByClassName("search-helper")[0].style.display = "block"
        var keyword = this.value
        var content = ""
        dataArr.forEach(function(e){
            content += "<li>"+e+"</li>"
        })
        document.getElementsByClassName("search-helper")[0].innerHTML = content
    }
    document.getElementById("search").onfocus = function(e){
        // console.log(this.value)
        document.getElementsByClassName("search-helper")[0].style.display = "block"
        var content = ""
        resouArr.forEach(function(e){
            content += "<li>"+e+"</li>"
        })
        document.getElementsByClassName("search-helper")[0].innerHTML = content

    }
    document.getElementById("search").onblur = function(e){
        setTimeout(function(){
            document.getElementsByClassName("search-helper")[0].style.display = "none"
        },300)
    }
    document.getElementsByClassName("search-helper")[0].onmouseover = function(e){
        // console.log(e.target,e.target.tagName === "LI")
        if(e.target.tagName === "LI"){
            e.target.style.background = "#F5F5F5"
        }
    }
    document.getElementsByClassName("search-helper")[0].onmouseout = function(e){
        // console.log(e.target,e.target.tagName === "LI")
        if(e.target.tagName === "LI"){
            e.target.style.background = "#ffffff"
        }
    }
    document.getElementsByClassName("search-helper")[0].onclick = function(e){
        //console.log(1111,e.target,e.target.tagName === "LI")
        if(e.target.tagName === "LI"){
            document.getElementById("search").value = e.target.innerText
        }
    }
}
</script>

html

<div class="box">
    <input type="text" id="search">
    <ul class="search-helper">
    </ul>
    <span></span>
    <button>
        <i></i>
    </button>
</div>