$(document).ready(function(){
	init();
	$('#inputbox').keydown(function(e){//检查键盘按键
		var code=e.keyCode;
		if(code==38){//up
			moveIndex(1);
		}else if(code==40){//down
			moveIndex(0);
		}else if(code==13){//enter
			inputSelect(preIndex);
			return true;
		}
	});
	$('#inputbox').focus(function(){
		if($('#inputbox').val()=='请输入您要查找的车型品牌'){
			$('#inputbox').val('');
		}
		checkInput();
	});
	
	$('#inputbox').blur(function(){
		if($('#inputbox').val()==''){
			$('#inputbox').val('请输入您要查找的车型品牌');
		}
	});
	
	$('body').click(function(){
		$('#autobox').hide();
		return true;
	});
});

var preValue='';
var dataArray=[];
var preIndex=-1;
var pannelView=0;

function init(){//初始化面板
	$("<div id='autobox'></div>").html('<ul></ul>').appendTo('body');
	var position=$('#inputbox').position();
	$('#autobox').css({
		top:position.top+21+'px',
		left:position.left+'px'
	}).hide();
}
function getData(str){//获取信息
	if(str=='') return;
	$.get('http://www.9qc.com/public/pinpai',{name:str},function(json){
		dataArray=json.data;
		pannelUpdate();
		preIndex=-1;
	},'json');
}
function checkInput(){//查INPUT值再进行页面更新

	var inputValue=$('#inputbox').val();

	if(inputValue!=''&&preValue!=inputValue){
		preValue=inputValue;
		getData($('#inputbox').val());
	}else if(inputValue==''){
		$('#autobox').hide();
		pannelView=0;
	}
	setTimeout('checkInput()',10);
}
function pannelUpdate(){//自动提示的更新
	if(dataArray.length>1){
		$('#autobox ul').html('');
		for(i=0;i<dataArray.length;i++){
			$('<li onmouseover="highLight('+i+')" style="cursor:default" onclick="inputSelect('+i+');"></li>').html(dataArray[i].name).appendTo('#autobox ul');
		}
		$('#autobox').show();
		pannelView=1;
	}else{
		pannelView=0;
	}
}
function inputSelect(index){//选择自动提示
	if(index<0)
		return;
	$('#inputbox').val(dataArray[index].name);
	$('#autobox').hide();
	pannelView=0;
}
function highLight(index){
	preIndex=index;
	$('#autobox ul').children().removeClass('hoverli');
	$('#autobox li:eq('+index+')').addClass('hoverli');
}
function moveIndex(dex){
	if(pannelView==0) return;
	if(dex==1){//up
		preIndex=preIndex<1?0:preIndex-1;
		if(preIndex<8){
			$('#autobox').scrollTop(-50);
		}
		highLight(preIndex);
	}else{//down
		preIndex=preIndex<dataArray.length-1?preIndex+1:dataArray.length-1;
		if(preIndex>8){
			$('#autobox').scrollTop((preIndex-8)*50);
		}
		highLight(preIndex);
	}
}
