javascript - CSS 样式问题 - 未在 Firefox 中显示

我已经编写了自己的搜索，实际上是通过 Ajax 获取结果。我已经将该代码从 Ajax 重写为 jQuery，以向您展示我的错误所在。使用 Google Chrome 或 Safari 运行以下代码。它会起作用。在搜索栏中输入 Max 或 Jil，您将得到一个结果。但是，如果您尝试使用 Mozilla Firefox 获取结果，则不会显示结果框。它一次又一次地设置为 display: none...这是为什么，我该如何解决？

这是我的代码:

 var results = {
 	Max: '<div class="search-items">2: Max</div>',
    Jil: '<div class="search-items">3: Jil</div>'
}
 
 $(document).on('focus', '#search_input', function() {
   $("#autocomplete-list").css("display", "block");
   //$("#autocomplete-list").show();
 });

$(document).on('keyup', '#search_input', function() {
   var serach_request = $("#search_input").val();
     
   if(serach_request in results){
     console.log(serach_request);
     $("#autocomplete-list").html(results[serach_request]);
   }else{
     $("#autocomplete-list").empty();
   }
 });

$(document).on('click', function() {
  $("#autocomplete-list").hide();
});

$("#autocomplete-list, #search_input_wrapper").on('click', function() {
  event.stopPropagation();
});

/* Autocomplete Stlying */
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 15px;
    right: 15px;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    text-align: left;
}

/* When hovering an item: */
.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

/* When navigating through the items using the arrow keys: */
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

<!DOCTYPE html>
<html>
<body>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >

  <div class="row" id="actions">
    

    <div class="col-md-8 text-right">
      <div class="col-md-4 col-sm-12">
        <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
          <input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
          <div id="autocomplete-list" class="autocomplete-items">
            
          </div>
        </div>
      </div>
    </div>
  </div>
  
</body>
</html>

亲切的问候

最佳答案

在函数调用中添加event参数。控制台中显示了与此相关的错误。

$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
  event.stopPropagation();
});

var results = {
  Max: '<div class="search-items">2: Max</div>',
  Jil: '<div class="search-items">3: Jil</div>'
}

$(document).on('focus', '#search_input', function() {
  $("#autocomplete-list").css("display", "block");
  //$("#autocomplete-list").show();
});

$(document).on('keyup', '#search_input', function() {
  var serach_request = $("#search_input").val();

  if (serach_request in results) {
    console.log(serach_request);
    $("#autocomplete-list").html(results[serach_request]);
  } else {
    $("#autocomplete-list").empty();
  }
});

$(document).on('click', function() {
  $("#autocomplete-list").hide();
});

$("#autocomplete-list, #search_input_wrapper").on('click', function(event) {
  event.stopPropagation();
});

/* Autocomplete Stlying */

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 15px;
  right: 15px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}


/* When hovering an item: */

.autocomplete-items div:hover {
  background-color: #e9e9e9;
}


/* When navigating through the items using the arrow keys: */

.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<!DOCTYPE html>
<html>

<body>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <div class="row" id="actions">


    <div class="col-md-8 text-right">
      <div class="col-md-4 col-sm-12">
        <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
          <input id="search_input" type="text" name="search_input" class="form-control" autocomplete="off" placeholder="Kunde" style="margin-top: 25px;">
          <div id="autocomplete-list" class="autocomplete-items">

          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

关于javascript - CSS 样式问题 - 未在 Firefox 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51578886/

javascript - CSS 样式问题 - 未在 Firefox 中显示

上一篇：css - 为什么 col-sm-12 添加了 col-sm 在 bootstrap 中没有的边距？

下一篇：javascript - 我的导航栏无法点击