[英]How can I make a search box selection toggle open a box (div?) below it to display information I've compiled
On a page of my site, I want a searchbox that will enable visitors to type in the name of a US state or Canadian territory or province.在我网站的一个页面上,我想要一个搜索框,访问者可以通过该搜索框输入美国 state 或加拿大领土或省份的名称。 Once the searchbox is populated with their choice, I want clicking on an icon next to their selection to toggle open a box underneath that will display information I've compiled related to that selection.一旦搜索框填充了他们的选择,我想点击他们选择旁边的一个图标来切换打开下面的框,该框将显示我编译的与该选择相关的信息。
Here, originally from CodeNepal, modified somewhat by me, is a good example of what I want.这里,最初来自 CodeNepal,由我稍作修改,是我想要的一个很好的例子。 However, instead of sending the visitor to a Google page whose search term matches the inputted selection, I want a corresponding box to toggle open.但是,我不想将访问者发送到搜索词与输入的选择相匹配的 Google 页面,而是希望打开相应的框。 I know that it's the "weblink" line that needs to change, but I'm not sure how to amend it to display/hide a div or something like that.我知道需要更改的是“网络链接”行,但我不确定如何修改它以显示/隐藏 div 或类似内容。
Note: I'm not sure if this is even pertinent, but rather than attempt to relate each of the 64 posssible selections to a database entry, I would hand write them out into divs with anchors or whatever.注意:我不确定这是否相关,但我不会尝试将 64 个可能的选择中的每一个与数据库条目相关联,我会用锚点或其他任何东西将它们写到 div 中。
<div class="wrapper">
<div class="search-input">
<a href="" target="_blank" hidden></a>
<input type="text" placeholder="Type to search..">
<div class="autocom-box">
<!-- here list are inserted from javascript -->
</div>
<div class="icon"><i class="fas fa-search"></i></div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: #644bff;
padding: 0 20px;
}
::selection{
color: #fff;
background: #664AFF;
}
.wrapper{
max-width: 450px;
margin: 150px auto;
}
.wrapper .search-input{
background: #fff;
width: 100%;
border-radius: 5px;
position: relative;
box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12);
}
.search-input input{
height: 55px;
width: 100%;
outline: none;
border: none;
border-radius: 5px;
padding: 0 60px 0 20px;
font-size: 18px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
}
.search-input.active input{
border-radius: 5px 5px 0 0;
}
.search-input .autocom-box{
padding: 0;
opacity: 0;
pointer-events: none;
max-height: 280px;
overflow-y: auto;
}
.search-input.active .autocom-box{
padding: 10px 8px;
opacity: 1;
pointer-events: auto;
}
.autocom-box li{
list-style: none;
padding: 8px 12px;
display: none;
width: 100%;
cursor: default;
border-radius: 3px;
}
.search-input.active .autocom-box li{
display: block;
}
.autocom-box li:hover{
background: #efefef;
}
.search-input .icon{
position: absolute;
right: 0px;
top: 0px;
height: 55px;
width: 55px;
text-align: center;
line-height: 55px;
font-size: 20px;
color: #644bff;
cursor: pointer;
}
let suggestions = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"District of Columbia",
"Delaware",
"Florida",
"Hawaii",
"Idaho",
"Illinois",
"Indianar",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
];
// getting all required elements
const searchWrapper = document.querySelector(".search-input");
const inputBox = searchWrapper.querySelector("input");
const suggBox = searchWrapper.querySelector(".autocom-box");
const icon = searchWrapper.querySelector(".icon");
let linkTag = searchWrapper.querySelector("a");
let webLink;
// if user press any key and release
inputBox.onkeyup = (e)=>{
let userData = e.target.value; //user enetered data
let emptyArray = [];
if(userData){
icon.onclick = ()=>{
webLink = `https://www.google.com/search?q=${userData}`;
linkTag.setAttribute("href", webLink);
linkTag.click();
}
emptyArray = suggestions.filter((data)=>{
//filtering array value and user characters to lowercase and return only those words which are start with user enetered chars
return data.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
});
emptyArray = emptyArray.map((data)=>{
// passing return data inside li tag
return data = `<li>${data}</li>`;
});
searchWrapper.classList.add("active"); //show autocomplete box
showSuggestions(emptyArray);
let allList = suggBox.querySelectorAll("li");
for (let i = 0; i < allList.length; i++) {
//adding onclick attribute in all li tag
allList[i].setAttribute("onclick", "select(this)");
}
}else{
searchWrapper.classList.remove("active"); //hide autocomplete box
}
}
function select(element){
let selectData = element.textContent;
inputBox.value = selectData;
icon.onclick = ()=>{
webLink = `https://www.google.com/search?q=${selectData}`;
linkTag.setAttribute("href", webLink);
linkTag.click();
}
searchWrapper.classList.remove("active");
}
function showSuggestions(list){
let listData;
if(!list.length){
userValue = inputBox.value;
listData = `<li>${userValue}</li>`;
}else{
listData = list.join('');
}
suggBox.innerHTML = listData;
}
// hardcoded array - (you can fetch it from api aswell) let suggestions = [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "District of Columbia", "Delaware", "Florida", "Hawaii", "Idaho", "Illinois", "Indianar", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", ]; const dropdownList = document.getElementById('statesList'); suggestions.forEach((suggestion, index) => { let el = document.createElement("option"); el.label = suggestion; el.value = suggestion; el.id = suggestion; dropdownList.appendChild(el); }); const search = () => { const selectedOption = document.getElementById('states').value; console.log(selectedOption); // inputVal is the selected option // write code to append data about selected option }
<html> <body> <h1>Dropdown with searchable text</h1> <form> <label for="states">Choose your state:</label> <input list="statesList" id="states" name="states" placeholder="type here..." /> <button type='button' onclick='search()'>SEARCH</button> <datalist id="statesList"></datalist> </form> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.