简洁版输入智能提示框

一直做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;" >
[list]
<li id="inputHisTemplate" ><a href="#"></a></li>
[/list]
</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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值