.input-wrapper{
  width: 200px;
  margin: 50px auto;
  padding: 0;
}
/* 整個選單的外框，設最大高度，超出份為 hidden */
.input-div {
  position: relative;
  border: 1px solid blue;
  width: 240px;
  max-height: 250px;
  overflow: hidden;
}
/* input 輸入框取消外框線 */
.input-div input {
  width: 196px;
  border: none;
  outline: none;
}
/* .input-div input:focus {
  border:none;
}  */
/* 輸入框箭頭 */
.input-div i {
  position: absolute;
  right: 6px;
  font-size: 16px;
  transition: transform 0.3s linear;  
}
.arrowTransform {
  transform: rotate(-180deg);
}

.option.active  i{
  transform: rotate(-180deg);
}
/* 選項列表 預設內容超過時 要有卷軸 */
.option {
  display: none;
  height: 100px;
  overflow-y: auto;
}

.option li {
  list-style: none;
}
/* 選項卷軸 */
.option::-webkit-scrollbar{
  width: 7px;
}
.option::-webkit-scrollbar-track{
  background: #f1f1f1;
  border-radius: 24px;
}
.option::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 24px;
}
.active {
  display:block;
/*   border: 1px red solid; */
}

// inputSearch 取得 input 輸入框的 DOM 元素
const inputSearch = document.getElementById('input-search');
// option 取得 要置放下拉選項的 DOM 元素
const option = document.querySelector('.option');
// arrow 取得 input 輸入框的向下箭頭
const arrow = document.querySelector('.uil-angle-down')
const i = document.querySelector('.input-div i')
// 下拉選單的選項
let iParks = ["鋼鐵人","蜘蛛人","美國隊長","黑寡婦","雷神"];


// 監聽 輸入框，點擊時 option 加上 .active 樣式
inputSearch.addEventListener('click',()=>{
//   添加 active 樣式，讓下拉選單顯現出來
  option.classList.toggle('active');
  console.log(i);
  if (option.classList.contains("active")) { 
    i.classList.add("arrowTransform");
  } else {
    i.classList.remove("arrowTransform");
  }
  // arrow.classList.toggle('arrowTransform');
  addIpark();
})


// 把選項渲染到下拉選單中
function addIpark(){
  option.innerHTML = "";
  iParks.forEach(iPark =>{
    console.log(iPark);
    let li = `<li onclick="updateName(this)">${iPark}</li>`;
    option.insertAdjacentHTML("beforeend",li);
  })
}
// 下拉選單 選取選項之後 更新到 input
function updateName(selectedLi){
  console.log(selectedLi.innerText);
  inputSearch.value ="";
  addIpark();
  option.classList.remove("active");
  if (option.classList.contains("active")) { 
    i.classList.add("arrowTransform");
  } else {
    i.classList.remove("arrowTransform");
  }
  inputSearch.value = selectedLi.innerText;
  // selectBtn.firstElementChild.innerText = selectedLi.innerText; 
}
// 監聽輸入框
inputSearch.addEventListener("keyup",()=>{
  console.log(inputSearch.value);
  let arr = [];
  let searchedVal = inputSearch.value;
  arr = iParks.filter(data => {
    console.log('data',data.startsWith(searchedVal))
    return data.toLowerCase().startsWith(searchedVal);
  }).map(data => `<li onclick="updateName(this)">${data}</li>`).join("");
  option.innerHTML = arr ? arr : `<p>沒有符合您輸入條件的選項</p>`;
  console.log(arr);
})