要做一个车牌号输入的输入框联想提示功能,要求比较简单,故没有利用ajax去数据库查询.
车辆多为京津冀地区的.
js代码如下:
<head>
<style type="text/css">
.item:hover{
background-color: Gray;
cursor:pointer;
}
.hidden{
width:100%;
z-index: 10;
display: none;
border:1px solid rgb(80,160,91);
border-top:none;
z-index:5;
}
</style>
</head>
<script type="text/javascript">
$(function(){
//输入车牌号给予提示
$("#carno").keyup(function(evt){
//再次按键时将提示框隐藏
$("#tbcontent").fadeOut();
evt = (evt) ? evt : window.event
if (evt.keyCode) {
var keyValue = String.fromCharCode(evt.keyCode);
if($("#carno").val()=="J"){//文本框的值是j
//alert(0)
$("#tbcontent").html(""); //删除提示框原有数据
var data = [‘冀‘,‘津‘,‘京‘];//常用车牌归属地
if (data != null) {
for (var i = 0; i < 3; i++) {
$("#tbcontent").append(‘<div class="item" onclick="mousedown(this)">‘ + data[i] + ‘</div>‘);
}
$("#tbcontent").slideDown();//提示框显示
}
}
}
});
});
//选择其中的提示内容
function mousedown(object) {
$("#carno").val($(object).text());
$("#tbcontent").fadeOut();
}
//文档框失去焦点，隐藏提示内容
function lost() {
$("#tbcontent").fadeOut();
}
</script>
效果图:
1:
2:车牌号输入栏输入 "J"
样式十分不美观!