JS+JQuery模仿百度下拉效果，Opera方向键向下问题。。。。。。。 -

love452076852

浏览: 54634 次
性别:
来自: 北京

最近访客更多访客>>

lncdzh

daidai2016

liang2467867

一只小胖纸

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JS+JQuery模仿百度下拉效果，Opera方向键向下问题。。。。。。。

博客分类：

Ajax_JS_JQuery_JQuery UI_ExtJS_正则

Opera 百度 jQuery CSS Ajax

先看看代码吧，基本效果已经实现。
但是在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();
      //跳转。。。。。等 操作。
  }
});