前端html代码

<div id="input_ship">
    <input  type="text" id="input" placeholder="请输入船名" autocomplete="off">
    <div id="check_ship">搜索船舶</div>
</div>
<div class="ship_box" id="ship_box">
    <ul>
    </ul>
</div>

前端js代码

$("#input").keyup(function () {
            var ship_name = $("#input").val();
            var jsonData = {
                "ship_name": ship_name,
            };
            if(ship_name != ""){
                $('ul').html("");
                $.post("{:url('Main/shiplike_ajax')}", jsonData, function (data) {
                    var length = data.length;
                    var li="";
                    for(var i=0; i < length; i++){
                        li += "<li>" + data[i].name +"<li>";
                    }
                    $('ul').append(li);
                    $('ul').show();
                    var li_len = $("li").length;
                    for(var i=0; i < li_len; i++){
                        $('#ship_box ul li').eq(i).click(function(){
                            $('#input').val($(this).text());
                            $("ul").hide();
                        })
                    }
                }, 'json');
            }else{
                $("ul").hide();
            }
 })

前端css代码

ul{
            width: 180px;
            position: absolute;
            top: 85px;
            left: 100px;
            z-index: 1000;
            background: white;
            padding: 0;
            list-style: none;
        }
        li:hover{
            background:#CCCCCC;
            color:black;
            cursor: pointer;
        }

后端php返回json

public function shipLikeAjax(){
        if(request()->isAjax()){
            $ship_name = $this->request->post('ship_name');
            //条件查询
            $map['cmf_ship.name'] = ['like',"%$ship_name%"];
            $data = Db::name('ship') ->field('name') -> where($map) -> select();
            return $data;
        }
 }