inputClient.js

$(document).ready(function () {
loadData();
});

//初始化数据
function loadData(){
loadMList();//加载数据
$("#shortName").selectCity("#selectItem");

}

jQuery.fn.selectCity = function(targetId) {
var _seft = this;
var targetId = $(targetId);
this.click(function(){
var A_top = $(this).offset().top + $(this).outerHeight(true); // 1
var A_left = $(this).offset().left;
targetId.bgiframe();
targetId.show().css({"position":"absolute","top":A_top+"px" ,"left":A_left+"px"});
//$("#clientList tr:eq(0)").addClass("hover");

_seft.bind("keyup",function(event){

if(targetId.css('display')=='block'&&event.keyCode == 38||event.keyCode == 40||event.keyCode == 13){
var current = targetId.find('tr.hover');

var tarTop = targetId.offset().top;//targetId的位置纵坐标
var cliHeight = $("#selectSub").height();//$("#selectSub")的高
if(event.keyCode == 38){
if(current.length>0){
var curTop = current.offset().top+$("#selectSub").scrollTop();//current的位置，$("#selectSub").scrollTop()滚动条滚去的高度
var curHeight = current.height();//current的高度
var scrTop = curTop -tarTop -cliHeight+curHeight;//
if(scrTop>0){
$("#selectSub").scrollTop(scrTop);//滚动条滚动
}
var prevLi = current.removeClass('hover').prev();
if(prevLi.length>0){
prevLi.addClass('hover');
//_seft.val(prevLi.html());
}
}else{
var last = targetId.find('tr:last');
last.addClass('hover');
//_seft.val(last.html());
}
}else if(event.keyCode == 40){

if(current.length>0){
var curTop = current.offset().top+$("#selectSub").scrollTop();
var curHeight = current.height();
var scrTop = curTop -tarTop -cliHeight+curHeight;
if(scrTop>0){
$("#selectSub").scrollTop(scrTop)
}
var nextLi = current.removeClass('hover').next();
if(nextLi.length>0){
nextLi.addClass('hover');
//_seft.val(nextLi.html());
}
}else{
//console.log(targetId.scrollTop())
var first = $("#clientList").find('tr:first');
//alert(1)
first.addClass('hover');

//_seft.val(first.html());
}
}else if(event.keyCode == 13){
_seft.val(current.find("td").eq(1).text());

}
}
});
});
targetId.find("#selectItemClose").click(function(){
targetId.hide();
});
$(document).click(function(event){
if(event.target.id!=_seft.selector.substring(1)){
targetId.hide();
}
});
return this;
}
//鼠标点击选中数据
$("tr[id^='sp_']").live("click",function(){
var trIndex=$(this).attr('id');//获取tr的id
var $tr=$("#"+trIndex);
valArr=[];//$tr是获取的tr
/**$tr.find("td").each(function(){
valArr.push($.trim($(this).text()));//.text()获取td的文本内容，$.trim()去空格
});
alert(valArr.join(";"));//输出结果
**/
$('#shortName').val($tr.find("td").eq(1).text());//客户名称
$('#clientShotName').val($tr.find("td").eq(1).text());//简称
$('#clientContact').val($tr.find("td").eq(2).text());//联系人
$('#clientMobile').val($tr.find("td").eq(3).text());//手机
$('#selectItem').hide();
});

function loadMList(){
$("#clientList tr").remove();
//$.getJSON("",function(data){
for(var i=0;i<15;i++){
var tr="<tr id='sp_"+(i+1)+"' style='display: block;'>"+
"<td align='center' style='50px;'>"+(i+1)+"</td>"+
"<td align='center' style='150px;'>中石油"+i+"</td>"+
"<td align='center' style='90px;'>张三</td>"+
"<td align='center' style='90px;'>13989652314</td>"+
"</tr>"
$("#clientList").append(tr);
}
//鼠标经过 移除变色
$("#clientList tr ").hover(
function () { $(this).addClass("hover") },
function () { $(this).removeClass("hover") })
//});
}