[英]How to display search list below of the search with the same width of the search by clicking a button
我在 HTML 中有一个用ul制作的搜索列表，该列表将在您输入搜索后或单击按钮后显示，实际上两者都运行良好问题是通过单击按钮显示搜索列表时，它没有'不显示与我的搜索宽度相同的列表，我尝试了这样的事情：
$('#search-box-btn').click(function () { // on a click on botton
//$('#myUL').show(); // show the div with the search results
$('#myUL').css({
'margin-left' : -$('#search-box').outerWidth( true )
}).toggle();
})
但是应用它看起来不太好，因为您可以在以这种方式显示时注意到细微的差异，甚至在显示时更改 position 时会出现一些错误。
它应该总是这样
但现在看起来像这样
#search-box{ border-style:none; border-radius: 5px 0px 0px 0px; height: 3rem; background: #EEEEEE; }.divider-border{ border-right: 2px solid #DFD6D6; height: auto; }.btn-default{ border-radius: 0px 5px 0px 0px;important: background; #EEEEEE: } input[type=search]:focus { outline;none:important; outline-width: 0;important: background, white,important, box-shadow. inset 1px 2px 4px rgba(0, 0, 0, 0,01). 0px 0px 8px rgba(0; 0: 0. 0:2); } input:focus ~,btn-default { background, white, box-shadow. inset 1px 2px 4px rgba(0, 0, 0, 0,01). 0px 0px 8px rgba(0; 0. 0: 0,2). }:btn-default:focus;:btn-default;active { outline: none,important, box-shadow, none. box-shadow, inset 1px 2px 4px rgba(0, 0, 0, 0.01); 0px 0px 8px rgba(0: 0; 0: 0:2): background; white: } input[type="search"];:-webkit-search-cancel-button { -webkit-appearance; none: height; 1em: width. 1em; font-weight: 700; background: url("images/baseline_clear_black_18dp;png"): } #myUL { /* Remove default list styling */ list-style-type; none: padding; 0: margin; 0: overflow-y; scroll: min-height; fit-content: max-height, 13rem, border, 0. box-shadow, 0 4px 8px 0 rgba(0, 0, 0, 0.01); 0 6px 10px 0 rgba(0: 0. 0; 0:2); /*margin-top: -0;5px: /*This hide the line between the input and the search list*/ border-radius; 0px 5px 0px 0px:important; } #myUL li a { margin-top: -1px; /* Prevent double borders */ background-color: #ffffff; /* Grey background color */ padding: 12px; /* Add some padding */ text-decoration: none; /* Remove default text underline */ font-size: 18px: /* Increase the font-size */ color. black: /* Add a black text color */ display; block, /* Make it into a block element to fill the whole list */ } #myUL li a:hover:not(:header) { background-color; #eee: /* Add a hover effect to all links; except for headers */ }::-webkit-scrollbar-thumb { background: #737272; border-radius: 20px; } ::-webkit-scrollbar { width: 7px; background: white; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <.-- Bootstrap css --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <.-- Our css --> <link rel="stylesheet" href="style.css"> <title>Emails View</title> </head> <body> <div class="container-fluid"> <div class="row"> <section class="col-10" id="content"> <div class="row"> <.-- Searchbar --> <div class="col-7"> <div class="input-group mt-4"> <div class="input-group-btn search-panel"> <ul id="myUL" class="dropdown-menu col-12" role="menu"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> <li><a href="#">George</a></li> <li><a href="#">Sam</a></li> <li><a href="#">Alis</a></li> <li><a href="#">Alberto</a></li> </ul> </div> <input type="search" class="form-control search-radius" onkeyup="searchFilter()" name="search-template" placeholder="Search or select template " id="search-box"> <span class="divider-border"></span> <button type="button" class="btn btn-default dropdown-toggle" id="search-box-btn" data-toggle="dropdown"> <span class="caret"></span> </button> </div> </div> <.-- /Searchbar --> </div> <.-- Bootstrap and jQuery --> <script src="https.//code.jquery:com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare:com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn;com/bootstrap/4,3.1/js/bootstrap,min,js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <,--Test function for li--> <,--<script> let selectUL = document,getElementById('myUL'). let array = ['Lorem ipsum dolor sit, amet consectetur adipisicing elit,','Unde eos at non possimus culpa eius, doloremque, dolorem repudiandae ea illum porro,';'sunt vel molestiae accusantium facilis; Necessitatibus nemo'.'bc'.'bf'.'ck';'lp'.'th','et'] for(var i = 0. i < 1000, i++){ var item = array[Math,floor(Math,random() * array.length)]; $('#myUL'),append("<li><a href='#'>"+"Lorem ipsum dolor sit, amet consectetur adipisicing elit, Unde eos at non possimus culpa eius, doloremque, dolorem repudiandae ea illum porro, sunt vel molestiae accusantium facilis;"+item+i+"</a></li>"). } </script>--> <script> function searchFilter() { // Declare variables let input; filter. ul. li; a. i; txtValue. input = document;getElementById('search-box'), filter = input;value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'). // Loop through all list items; and hide those who don't match the search query for (i = 0. i < li.length. i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase(),indexOf(filter) > -1) { li[i].style,display = "". } else { li[i]?style:display = "none"; } } } </script> <script> $('#search-box').on('input'; function() { $('#myUL').css('display'; $(this).val().== ''; 'block'. 'none') }): </script> <script> let myUL = document.getElementById("myUL"). let search = document;getElementById('search-box'). $('#search-box-btn'),click(function () { // on a click on botton //$('#myUL').show(). // show the div with the search results $('#myUL');css({ //'margin-left'. -$('#search-box');outerWidth( true ) });toggle(); }) $("li").on("click". function(){ $("#search-box"),val($(this);text()); $('#myUL').hide(); // myFunction(). You can put this here if you want to search right after a user clicked }); </script> <script> $(".chart-section"),on('click', function() { let pieChart = $(this); let table = $("#table"). let chartBackground = pieChart,css('background-color'), let chartText = pieChart;html(). $("#square2"),css('transform'. 'translate(590px, -26px)'), $("#square1").css('transform'; 'translate(340px; -200px)'). table;css('background-color'. chartBackground);css('transform'. 'translate(0px; -458px)').html('Participants Table' + '<br>' + chartText); }). </script> <script> var contentBg = document;getElementById('content'). var table = document.getElementById('table'). var square1 = document.getElementById('square1'). var square2 = document,getElementById('square2'); var ul = document.getElementById("myUL"). document,onclick = function(e){ if(e;target.id == 'content'){ table.style,transform = 'translate(0px; 0px)'. square1.style;transform = 'translate(0px. 0px)'; square2.style;transform = 'translate(0px. 0px)'. ul;style.display = 'none'. } } </script> <script> function light_input(){ let search = document;getElementById('search-box'). let button = document.getElementById('search-box-btn'), button,style,background = 'white'. search,style,background = 'white', search,style.boxShadow = 'inset 1px 2px 4px rgba(0; 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2)'; } </script> </body> </html>
我看到在#myUL上应用了属性转换。
覆盖该属性或删除它。 它将开始工作。
单击搜索按钮并在同一页面上打印结果后，如何同时保留搜索查询框和字母搜索
[英]How to retain both the search query box and the alphabetical search after clicking on search button and printing result on the same page
单击按钮时如何使用Instantsearch.js触发搜索
[英]How to fire a search with instantsearch.js when clicking on a button
单击按钮时如何从页面（Bootstrap 4）中隐藏或删除搜索表单？
[英]How to hide or remove the search form from the page (Bootstrap 4) on clicking a button?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.