(function($){ $.fn.seltip = function(){ return this.each(function(){ this_select = $(this); var tem_id = this_select.attr("id"); var obj = document.getElementById(tem_id); var obj_len = obj.options.length; var delaytime; if(!document.getElementById("div_"+tem_id)){ this_select.wrap("<div id='div_"+tem_id+"'></div>"); var $div = $("#div_"+tem_id); $("<input type='text' style="cursor:pointer;" mce_style="cursor:pointer;" id='tem_"+tem_id+"'>").appendTo($div); $("<span>").appendTo($div).attr("id","span_"+tem_id).hide(); } var $span = $("#span_"+tem_id); var $tem_input = $("#tem_"+tem_id); var sel_height = this_select.css("height") == 'auto'? '16px' : this_select.css("height"); var index = 0; $("#tem_"+tem_id).css("height",sel_height) .css("width",this_select.css("width")) .bind("click keyup",function(){ var tem_this = $(this); var inp_value = tem_this.val(); var inp_len = inp_value.length; if(delaytime !== undefined){ clearTimeout(delaytime); } var div_ul = $("#div_"+tem_id+" ul"); var ie=(document.all)?true:false; var keyCode; if (ie){keyCode = window.event.keyCode; }else{keyCode =e.which;} if (keyCode==40||keyCode==38){ div_ul.children(":eq("+index+")").css("background","white"); if(keyCode==40){ index = index == obj_len? index : index+1; }else{ index = index == 0? index : index-1; } div_ul.children(":eq("+index+")").css("background","#cccccc"); }else if (keyCode==13){ var sel_index = div_ul.children(":eq("+index+")"); $span.html(sel_index.attr("id")); $tem_input.val(sel_index.html()); div_ul.slideUp(); }else{ delaytime = setTimeout(function(){ div_ul.remove(); var offSet = tem_this.offset(); $("#div_"+tem_id).append("<ul id='ul_"+tem_id+"'></ul>"); var $ul = $("#ul_"+tem_id); $ul.css("width",tem_this.outerWidth()+"px") .css("left",offSet.left+"px") .css("top",offSet.top+$tem_input.outerHeight()+"px") .css("dispaly","block") .css("background-color","#FFFFFF") .css("border","1px solid #999999") .css("border-top","0px") .css("margin","0px") .css("padding","0px") .css("list-style","none") .css("position","absolute"); for(var j=0;j < obj_len;j++){ var sltTxt = obj.options[j].text; if(sltTxt.substr(0,inp_len) != inp_value){continue;} var sltVal = obj.options[j].value; $("<li>").appendTo($ul).attr("id",sltVal).css("text-indent","5px").css("height","20px").css("line-height","20px").css("cursor","pointer").html(sltTxt).click(function(){ $span.html($(this).attr("id")); $tem_input.val($(this).html()); div_ul.slideUp(); }) } if(obj_len > 4){ $("#ul_"+tem_id).css("overflow","auto").css("height","100px"); } },300); } }); $(this).hide(); }); } })(jQuery);