前端html代碼
<div id="input_ship">
<input type="text" id="input" placeholder="請(qǐng)輸入船名" 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;
}
}
