<script src="jquery-1.3.2.js"></script>
<style>*{font-size:12px;}</style>
<script>
var index = -1;
$.fn.extend({
ajaxtips:function(param){
var key = {down:40,up:38,enter:13,esc:27}; //键值
var rs = param.resultSet.split(","); //结果集
var text = $("#"+param.textid); //文本对象
var os = text.position();
$("#tipsdiv").remove(); //清除div对象
text.after("<div id='tipsdiv'></div>");
var paterdiv = $("#tipsdiv");
var divwidth = text.outerWidth(true);
paterdiv.css({
background : "#fff",
position : "absolute",
left : os.left+"px",
border : "1px solid #000",
width : divwidth+"px",
top : text.outerHeight(true) + os.top-1+ "px"
});
$.each(rs,function(i,n){
var value ="<div style='word-break:break-all;overflow:hidden;' id=tipsdiv"+i; //设置样式,自动换行
value += " onmouseover =index="+i+";$('#tipsdiv').children().css({'background':'#fff','color':'#000'});"
value += "$(this).css({'background':'#3165CE','color':'#fff'});";
value += " onmouseout =$(this).css({'background':'#fff','color':'#000'});";
value += " onclick = $('#tipsdiv').css('display','none');$('#"+param.textid+"').val($(this).text());> ";
value += "<span style='margin-left:2px'>"+ n + "</span></div>";
$("#tipsdiv").append(value);
});
var lenght = rs.length;
var out = $('#tipsdiv'+index).trigger("onmouseout");
switch(window_event().keyCode){
case key.up :
if(index <= 0) index = lenght ;
var divup = $('#tipsdiv'+(index-1));
out;
divup.trigger("onmouseover");
text.val(divup.text());
break;
case key.down :
if(index >= lenght-1) index = -1;
var divdown = $('#tipsdiv'+(1+index));
out;
divdown.trigger("onmouseover");
text.val(divdown.text());
break;
case key.enter :
case key.esc: paterdiv.css("display","none");
};
}
})(jQuery);
//firefox||ie下获取event(事件的状态)
function window_event(){
if(document.all){
return window.event;
}
var caller = window_event.caller;
while(caller!=null){
var argument = caller.arguments[0];
if(argument){
var temp = argument.constructor;
if(temp.toString().indexOf("Event")!=-1){
return argument;
}
}
caller = caller.caller;
}
return null;
}
$(document).ready(function(){
$('#text').keyup(function(){
$(this).ajaxtips({
resultSet:"a1,a2,a3,a4sssssssssssssssssssssssssssssssssssssssssss",
textid:"text"
});
});
});
</script>
<input id="text" type="text" /><br/>