CODEWITHSUNDEEP
javascriptjqueryhtmlcssfirefox
Jan
Jan

Reputation: 572

CSS Styling issue - Not showing up in Firefox

I have written a own search which is actually getting the results by an Ajax. I have rewritten that code from Ajax to jQuery to show you what my fault is. Run the code below with Google Chrome or Safari. It will work. Either Type Max or Jil in the search bar and you will get an result. But if you try to get a result with Mozilla Firefox, the result box is not showing up. It gets set to display: none again and again... why is that an how can I fix that?

Here is my code:

 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>

Kind regards

Upvotes: 0

Views: 41

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add event parameter to the function call . An error was showing in the console regarding the same.

$("#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>

Upvotes: 1

Related Questions