输入框提示
输入框提示
手动实现 类似百度的热词提示，支持回车，上下键选择，单击选择
var selectedIndex = -1;
//绑定事件
$(function(){
//获取匹配热词
var timeout = null;
$("#name").blur(function(){
$("#hotWordView").html("").hide();
}).keydown(function(event){
var event = event || window.event;
var keyCode = event.keyCode;
if(keyCode == 40 || keyCode == 38){
var isUp = false;
if(keyCode == 40){
isUp = true;
}
changeSelection(isUp);
}else if(keyCode == 13){
if(selectedIndex == -1){
$("#hotWordView").html("").hide();
clickButton();
}else{
var txt = $("#hotWordView").find("div[class='hotwordclass']").find("div:first").html();
$("#name").val(txt);
$("#hotWordView").html("").hide();
clickButton();
selectedIndex = -1;
}
}else{
selectedIndex = -1;
clearTimeout(timeout);
timeout = setTimeout(function(){
if($("#name").val().length > 0){
getHotWord();
}else{
$("#hotWordView").html("").hide();
}
},200);
}
});
$("#moreSearchCondition").keydown(function(event)
{
var event = event || window.event;
var keyCode = event.keyCode;
if(keyCode == 13)
{
moreSearchClickButton();
}
});
});
//上下键选择的function
function changeSelection(isUp){
if(isUp){
selectedIndex++;
}else{
selectedIndex--;
}
var maxIndex = $("#hotWordView").children().length -1;
if(selectedIndex < 0){
selectedIndex = maxIndex;
}
if(selectedIndex > maxIndex){
selectedIndex = 0;
}
for(var i = 0; i <= maxIndex; i++){
if(i == selectedIndex){
$("#hotWordView").children()[i].className = "hotwordclass";
}else{
$("#hotWordView").children()[i].className = "";
}
}
}
//从后台获取相关的词，并进行页面的展示
function getHotWord()
{
$.ajax({
type:'post',
url:'getWord.do',
data:{'name':$("#name").val()},
dataType:'json',
success:function(data)
{
if(!data || data.length<1)
{
$("#hotWordView").html("").hide();
}
else
{
var position = $("#name").position();
$("#hotWordView").html("").css({left: position.left , top: position.top
+ $("#name").outerHeight()}).width($("#name").width() - 2).show();
var i = 0;
//为每一个绑定事件
$.each(data,function(key,values){
i++;
var funList = (function(_i){
return [
function()
{
$("#hotWordView").children().removeClass("hotwordclass");
$("#divhot" + _i).addClass("hotwordclass");
selectedIndex = _i;
},
function()
{
if(selectedIndex == -1){
$("#hotWordView").html("").hide();
clickButton();
}else{
var txt = $("#divhot" + (selectedIndex)).find("div:first").html()
$("#name").val(txt);
$("#hotWordView").html("").hide();
clickButton();
selectedIndex = -1;
}
},
function(){
var txt = $("#divhot" + (selectedIndex)).find("div:first").text();
$("#name").val(txt);
selectedIndex = -1;
clickButton();
}
];
})(i);
var list = [
"<div id='divhot" + i + "' style='float:left;width:100%;clear:both;'>",
"<div style='float:left;margin-left:5px;'>"+ key +"</div>",
"<div style='float:right;margin-right:5px;'>"+ values +"</div>",
"</div>"
].join("");
$("#hotWordView").append(list);
$("#divhot" + i).mouseover(funList[0]).keydown(funList[1]).mousedown(funList[2]);
});
}
},
error : function(e) {
$("#hotWordView").html("").hide();
}
});
}