android 百度悬浮搜索框,百度的搜索框效果如何实现的？？？

var MyjQuery ={};var rowNo= 0MyjQuery.seekdiv= newObject({/*提示框

event：事件

txtid：文本框ID

txtvalue：文本框的值

array：进行搜索的数组

scrollbar：有无滚动条，yes表示有，no表示无。

count：提示框的展示条数

width,height：宽高*/SearchEngine:function(event, txtid, txtvalue, array, scrollbar, count, width, height) {if (scrollbar == "yes") {

$("body").append("

}else{

$("body").append("

}var divX = $("#" + txtid).offset().top + 20;var divY = $("#" +txtid).offset().left;

$("#flydiv").css("top", divX);

$("#flydiv").css("left", divY);//$("#iframe").attr("src", "../js/HighlyHint/iframe.htm");

$("#flydiv").append("

");if (txtvalue == "") {

array= "";

$("#tb tr").remove();

$("#flydiv").remove();

$("#flydiv").hide();

}var appendstr =array;var tszsz = "";var appendstrleng =appendstr.length;//根据行数的增加调整iframe的高度

var _height_tr = parseInt(height) / 30;if (appendstrleng >_height_tr) {

$("iframe").css("height", parseInt(height) + 20 * (appendstrleng - _height_tr) + "px");//alert(parseInt(height) + 20 * (appendstrleng - _height_tr));

}for (var i = 0; i < appendstrleng; i++) {if (count == 0) {

tszsz+= "

" + appendstr[i] + "";

}else{if (i < count) {//限定条数

tszsz += "

" + appendstr[i] + "";

}

}

}

$("#tb tr").remove();if (tszsz.length > 0) {

$("#flydiv").show();

}else{

$("#flydiv").hide();

}

$("#tb").append(tszsz);

MyjQuery.seekdiv.ok(event, txtid);

$(".clickrow").click(function() {var id = $(this).attr("id");

document.getElementById(txtid).value=document.getElementById(id).innerText;

$("#tb tr").remove();

$("#flydiv").remove();

$("#flydiv").hide();

$("#" +txtid).focus();

});

$(".leave").mouseleave(function() {

$("#tb tr").remove();

$("#flydiv").remove();

$("#flydiv").hide();

});

},

mouseout:function(i) {

document.getElementById("tr_" + i).style.backgroundColor = "#CEE5F7";

},

mousemove:function(i) {

document.getElementById("tr_" + i).style.backgroundColor = "#ECE9D8";

},

ok:function(event, inputId) {var tableId = 'tb';//事件的标识代码

if (event.keyCode == 38) {for (var k = 0; k < document.getElementById(tableId).rows.length; k++) {

document.getElementById(tableId).rows(k).bgColor= "#CEE5F7";

}if (rowNo == 0) {

rowNo++;

}if (document.getElementById(tableId).rows.length > 0) {

document.getElementById(tableId).rows(--rowNo % document.getElementById(tableId).rows.length).bgColor = "#ECE9D8";//document.getElementById(inputId).value = document.getElementById(tableId).rows(rowNo % document.getElementById(tableId).rows.length).innerText;

}

}//事件的标识代码

if (event.keyCode == 40) {for (var k = 0; k < document.getElementById(tableId).rows.length; k++) {

document.getElementById(tableId).rows(k).bgColor= "#CEE5F7";

}if (document.getElementById(tableId).rows.length > 0) {

document.getElementById(tableId).rows(++rowNo % document.getElementById(tableId).rows.length).bgColor = "#ECE9D8";//document.getElementById(inputId).value = document.getElementById(tableId).rows(rowNo % document.getElementById(tableId).rows.length).innerText;

}

}if (event.keyCode == 13) {if (document.getElementById(tableId).rows.length > 0) {

document.getElementById(inputId).value= document.getElementById(tableId).rows(rowNo %document.getElementById(tableId).rows.length).innerText;

}

$("#tb tr").remove();

$("#flydiv").remove();

$("#flydiv").hide();

}

}

});