[英]CSS Styling issue - Not showing up in 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>
CSS border-right，border-bottom在Firefox中未显示
[英]CSS border-right, border-bottom not showing up in firefox
jQuery slider 和简单菜单未在 IE6 中显示（CSS 问题？）
[英]jQuery slider and simple menu not showing up in IE6 (CSS issue?)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.