欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

简洁版输入智能提示框

程序员文章站 2022-07-14 23:06:03
...
一直做JAVA后端,从没想过有一天得自己写UI,分享下代码:

#inputHis {
  background-color: #FFF;
  font-size: 14px;
  line-height: 20px;
  overflow-y: hidden;
  position: absolute ;
  text-align: left;
  z-index: 1;
  border: 1px solid #999;
}
#inputHis ul{
  margin: 0;
  padding: 0;
}
#inputHis li {
  list-style: none;
}
#inputHis li a
{ display: block;
  padding: 3px;
  text-decoration: none;
  border-right: 1px solid white;
  white-space: nowrap
}

#inputHis li a:hover
{ background: #FAE4E4}


<div id="inputHis" style="min-width:100px; top:100px;left:65px; display: none;" >
       

             <li id="inputHisTemplate" ><a href="#"></a></li>
           

       </div>
     业务号码: <input id="serviceNo" name="serviceNo" style="width:80px;" type="text" title="请输入业务号码" value="${param.serviceNo}" />


<script type="text/javascript">

function inputHis_close()
{ $('#inputHis').hide(); }

function inputHis_timer()
{ closetimer = window.setTimeout(inputHis_close, 500);}

function loadInputHis(){
var reqUrl = '${ctx}/rest/services/sqlservice/allquery.json?sqlKey=mashup.qryAgentUseLog&userCode=${sessionScope.userCode}'
$.ajax({
     url: reqUrl ,
     data:{'rownum':'11','t':Math.random()},
     type: "POST",
     dataType :"json" ,
     success: function (data){
    $.each( data , function(i, obj){
       $inputHisTemplate = $('#inputHisTemplate').clone();
     $inputHisTemplate.removeAttr("id");
     $inputHisTemplate.find('a').text( obj.SERVICE_NO);
     $('#inputHis ul').append( $inputHisTemplate );
    });
      },
     error:function (XMLHttpRequest, textStatus, errorThrown){
      $inputHisTemplate = $('#inputHisTemplate').clone();
      $inputHisTemplate.removeAttr("id");
   $inputHisTemplate.find('a').text('加载失败');
   $('#inputHis ul').append( $inputHisTemplate );
     }
});
   
}

$(document).ready(function()
{

$('#serviceNo').bind('click', function(){
  var jInput = jQuery(this) ;
  var offset = jInput.offset();
  var vTop = offset.top + jInput.outerHeight(true);
  var vLeft = offset.left;
  //没有任何数据
  if($('#inputHis li a').length==1) loadInputHis();
   $('#inputHis').css({ top: vTop, left: vLeft })
  $('#inputHis').show();
});

$("#serviceNo").bind('blur', inputHis_timer);
 
$('#inputHis li a').live('click', function (){
  var serviceNo = $.trim($(this).text());
  $('#serviceNo').val( serviceNo );
  $("#qryForm")[0].submit();
});

$(document).bind('click', function(){ });
});

</script>
相关标签: ui jquery Ajax