Question

我写了一个自己的搜索，实际上是通过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>

亲切的问候

Answer 1

将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>

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

1 个答案: