JS+JQuery模仿百度下拉效果，Opera方向键向下问题。。。。。。。
先看看代码吧，基本效果已经实现。
但是在Opera中当输入值后，按方向键控制选择，向下没得效果，向上可以。。。。
其它浏览器没得问题。。
$("#" + inputDataTextId).keyup(function(event){
});
这个方法好像向下的时候根本就不执行。。。
请高人指点下。。。。
body { background-color: #F8F8FF;}#main { position: absolute; top: 100px; left: 36%; width: 400px; background-color: #F5FFFA;}#input_text { position: absolute; font-size: 18px; width: 390px; height: 23px; border: 1px solid #C9C9C9;}#input_div { position: absolute; width: 392px; top: 26px; border: 1px solid #454545; display: none; overflow: hidden;}#input_div { text-decoration: none; background-color: #FFFAFA;}#input_div div { vertical-align: middle; padding: 4px; font-weight: bold; color: #000000; width: 100%;}.div_item_select { background-color: #E0EEEE; height: 22px; font-size: 18px;}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title> <script type="text/javascript" src="jquery-1.4.2.js"> </script> </head> <body> <div id="main"> <input type="text" id="input_text"> <div id="input_div"> </div> </div> </body></html>
$(document).ready(function(){ /** * 当鼠标 放上去 的效果 CSS Class名称 */var divItemSelect = 'div_item_select';/*** 展示数据 的DIV*/ var showDataDivId = "input_div";/*** 输入框*/ var inputDataTextId = "input_text";/*** 点击* @param {Object} event */ $(document).click(function(event){ if (event.target.id != inputDataTextId) {$("#" + showDataDivId).slideUp(200); } });/*** 鼠标在文本框输入值* @param {Object} event*/ $("#" + inputDataTextId).keyup(function(event){ if (event.keyCode == 40) {//down chageSelect(1); } else if (event.keyCode == 38) {//up chageSelect(-1); } else if (event.keyCode == 13) {//回车 item_click($("#" + showDataDivId + " div[class='" + divItemSelect + "']")); } else if (this.value.length > 0) { //..ajax请求， 返回的时候 调用。。 //以下为 Ajax 返回的时候 调用的数据 var len = 10 - this.value.length; if (len < 1) { len = 5; } var str = ""; for (var i = 0; i < len; i++) { var index = i;//此处 为展示顺序，必须要 //此处拼接服务器返回的数据。。。。 str += "<div>" + this.value + index + "</div>" + //展示的数据 "<input type='hidden' name='d_index' value='" + index + "' />" //位置，勿动 //+ "<input type='hidden' name='d_value' value='" +index +"' />"; //用于放置数据 } //展示层，并展示数据 $("#" + showDataDivId).html(str).slideDown(200); //注册事件 registerInputEvent(); } else { $("#" + showDataDivId).slideUp(200); } });//.blur(function(){$("#" + showDataDivId).slideUp(200);});/*** 键盘操作 向上 或向上 * @param {Object} opt 向上 -1 向下 1 */ function chageSelect(opt){ if ($("#input_div").css('display') == 'block') { var obj = $("#input_div div[class='" + divItemSelect + "']"); if (obj.html() == null) {//当前还未选中。 if (opt == 1) { $("#" + showDataDivId + " div:first").addClass(divItemSelect); } else { $("#" + showDataDivId + " div:last").addClass(divItemSelect); } } else { var curr = parseInt($("#" + showDataDivId + " div[class='" + divItemSelect + "'] ~ input[name='d_index']").val()) + opt; var divCount = $("#" + showDataDivId + " div").size(); $("#" + showDataDivId + " div[class='" + divItemSelect + "']").removeClass(divItemSelect); $("#" + showDataDivId + " div:eq(" + ((curr < 0) ? (divCount - 1) : ((curr == divCount) ? 0 : curr) + ")")).addClass(divItemSelect); } } }/*** 注册事件*/ function registerInputEvent(){ $("#" + showDataDivId + " div").click(function(){ item_click($(this)); }).mouseover(function(){ $("#" + showDataDivId + " div[class='" + divItemSelect + "']").removeClass(divItemSelect); $(this).addClass(divItemSelect); }).mouseout(function(){ $(this).removeClass(divItemSelect); }); } /** * 点击每一项的操作 * @param {Object} obj */ function item_click(obj){ if (obj.html() == null) {//如果是按回车键。。。 //暂时不做操作。。。。 } else { //如果是点击 选择 $("#" + inputDataTextId).val($(obj).html()).focus(); //取得 你要放置的数据 d_value 为 变量名。。。 //var currValue = $("#" + showDataDivId + " div[class='" + divItemSelect + "'] ~ input[name='d_value']").val(); }$("#" + showDataDivId).hide(); //跳转。。。。。等 操作。 }});