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");
    })
});
 类似资料: