input输入时,ajax方式动态获取后台数据代码
萧成文
2023-12-01
//ajax方式动态获取后台数据
/*前台代码*/
<div class="input-group" style="width: 100%;">
<input type="text" class="form-control" placeholder="test信息" aria-describedby="sizing-addon2" id="suggestId" value="">
<div class="suggestlistshow" id="suggestlistshow"></div>
</div>
/*css代码*/
.suggestlistshow{
top: 33px;
display: none;
position: absolute;
z-index: 1;
width: 100%;
background: #071c34;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #ededed;
-webkit-box-shadow: 1px 1px 3px #ededed;
-moz-box-shadow: 1px 1px 3px #ededed;
-o-box-shadow: 1px 1px 3px #ededed;
}
.suggestlistshow>ul>li:hover{
background: #fff;
cursor: pointer;
color: #000;
}
/*js代码*/
$('#suggestId').bind('input propertychange', function() {
var suggestId = $('#suggestId').val();
var url='/nearbyresources/suggesWordtList';
var param={
"suggestId":suggestId,
}
var data = {"code":200,"result":[
{"value":"test1"},
{"value":"test2"},
{"value":"test3"},
{"value":"test4"},
{"value":"test5"},
{"value":"test6"},
{"value":"test7"},
{"value":"test8"},
]};
if(data.code == 200){
$(".suggestlistshow").css("display","block");
var result = data.result;
var htm = '<ul>';
for (var i = 0; i < result.length; i++) {
htm += '<li>'+result[i].value+'</li>';
}
htm += '</ul>';
$("#suggestlistshow").html(htm);
}
/*ajaxReq(url, param, callback);*/
$(".suggestlistshow li").click(function(){
var $this = $(this);
var suggword= $this.html();
$('#suggestId').val(suggword);
$(".suggestlistshow").css("display","none");
})
});