如图 百度的搜索框, 当文本框失去焦点时,浮动层就消失,但点击浮动层时,文本框不会失去焦点
如图,图碎了
试了一把,
还是很容易实现的,当在文本框输入字符后,会触发一个函数跨域取与输入字符匹配的关键字(参考:http://www.cnblogs.com/twobin/p/3395086.html ),然后生成下拉框,
然后点击下拉框的任一一项(注:此时文本框的焦点已失去,LZ可细看一下),把下拉框的值填入文本框中然后清除下拉框
谁说点击浮动层不会失去焦点,我点了后,浮动层就消失了。这个很简单呀,点击层后把焦点重新设置到搜索框
var MyjQuery = {}; var rowNo= 0 MyjQuery.seekdiv = new Object({ /* 提示框 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("<div id='flydiv' class='leave' style='position:absolute; display:none;right: 0px;top:0px;background-color:#CEE5F7;width:" + width + "px;height:" + height + "px;overflow:auto;overflow-x:hidden;'><iframe id='iframe' src='./js/HighlyHint/iframe.htm' style='position:absolute; visibility:inherit; top:0; left:0; width:1000px;height:" + height + "; z-index:-1;marginwidth='0' marginheight='0' frameborder='0' _filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';'></iframe></div>"); } else { $("body").append("<div id='flydiv' class='leave' style=' position:absolute;right: 0px;top:0px;background-color:#CEE5F7;'><iframe id='iframe' src='./js/HighlyHint/iframe.htm' style='position:absolute; visibility:inherit; top:0; left:0; width:" + width + ";height:" + height + "; z-index:-1;marginwidth='0' marginheight='0' frameborder='0' _filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';'></iframe></div>"); } 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("<table width='" + width + "' border='0' cellpadding='3' cellspacing='1' id='tb'></table>"); 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 += "<tr id='tr_" + i + "' class='clickrow' onmousemove='MyjQuery.seekdiv.mousemove(" + i + ")' onmouseout='MyjQuery.seekdiv.mouseout(" + i + ")' ><td>" + appendstr[i] + "</td></tr>"; } else { if (i < count) {//限定条数 tszsz += "<tr id='tr_" + i + "' class='clickrow' onmousemove='MyjQuery.seekdiv.mousemove(" + i + ")' onmouseout='MyjQuery.seekdiv.mouseout(" + i + ")' ><td>" + appendstr[i] + "</td></tr>"; } } } $("#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(); } } });
自己写的搜索窗口引擎,你可以试试...效果还过得去,大家找找bug
var d= ["本人或户主", "配偶", "子", "女 ", "孙子、孙女或外孙子、外孙女", "父母", "祖父母或外祖父母", "兄、弟、姐、妹", "家庭内其他关系", "非家庭关系成员"];
MyjQuery.seekdiv.SearchEngine(event, txtid, txtvalue, d, "no", 0, "300", "0");
jquery autocomplete 什么焦点消失啥的。。放在事件里面处理吧。。。