如何使搜索框選擇切換打開其下方的框（div？）以顯示我已編譯的信息

Question

在我網站的一個頁面上，我想要一個搜索框，訪問者可以通過該搜索框輸入美國 state 或加拿大領土或省份的名稱。 一旦搜索框填充了他們的選擇，我想點擊他們選擇旁邊的一個圖標來切換打開下面的框，該框將顯示我編譯的與該選擇相關的信息。

這里，最初來自 CodeNepal，由我稍作修改，是我想要的一個很好的例子。 但是，我不想將訪問者發送到搜索詞與輸入的選擇相匹配的 Google 頁面，而是希望打開相應的框。 我知道需要更改的是“網絡鏈接”行，但我不確定如何修改它以顯示/隱藏 div 或類似內容。

注意：我不確定這是否相關，但我不會嘗試將 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;
}

Answer 1

帶有可搜索文本的下拉菜單

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