简洁版输入智能提示框

一直做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>

评论

1 楼 json20080301 2014-11-14  

给输入框添加keyup,keydown事件来进行ajax数据检索，就实现了自动搜索功能啦。再用JQUERY插件编程的方式，将输入框和搜索建议DIV绑定，就可以封装成jquery插件