javascript - 无法在第二个文本框中输入值

Question

我创建了一个搜索框并将其设为绝对搜索框并在底部添加了一个文本框，但我无法单击并在文本框中输入值。

Note: Position must be the same, Click for the Second Text box is not working

这是jsFiddle链接

这是代码片段

var placeArr = ["Adele","Agnes","Billy","Bob","Calvin","Christina","Cindy"];

function myFunction() {
    let input, filter, ul, li, liElem, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        liElem = li[i];
        txtValue = liElem.textContent || liElem.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
   
}
function showDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
 (liList[i]).style.display="block";
} 
}
function hideDiv(){
let liList=(document.getElementById("myUL")).getElementsByTagName("li");
for(var i=0;i<liList.length;i++){
 (liList[i]).style.display="none";
} 
}

var selectPlace = function(ids){
document.getElementById("myInput").value=document.getElementById(ids).innerHTML;
hideDiv();
}

var generateList = function(array, eventfn){
let cnt=0;
 array.forEach(function(item){
  var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode(item);         // Create a text node
node.appendChild(textnode);     
node.setAttribute("id", "myLi"+(cnt++));
node.addEventListener("click", ()=>{eventfn(node.getAttribute("id"))});
document.getElementById("myUL").appendChild(node); 
});
};


generateList(placeArr,selectPlace);

* {
  box-sizing: border-box;
}

#myInput,.myInput {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 16px;
  padding: 12px 20px 12px 10px;
  border: 1px solid #ddd;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width:50%;
  height:200px;
  overflow-y:auto;
  position:absolute;
}

#myUL li  {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: none;
 
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<h2>My Phonebook</h2>
<div>
 <input type="text" id="myInput" class="myInput" onkeyup="myFunction()" onclick=showDiv() placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
</ul>
</div>
<br/>
  <div>
 <input type="text" class="myInput">
</div>

我添加了图片

Answer 1

目前，您的 ul 标记正在覆盖下面的 div。所以对于:

<div style="z-index: 1; position: relative;">
 <input type="text" class="myInput">
</div>

只需添加 z-index 和位置即可将其置于顶部。您必须通过 onclick 将样式添加到 ul 标记以在使用时覆盖它。

.override{
  z-index: 10;
  position: relative;
}

function showDiv(){
    let liList=(document.getElementById("myUL")).getElementsByTagName("li");
    for(var i=0;i<liList.length;i++){
     (liList[i]).style.display="block";
    } 
    li = document.getElementById('myUL'); // added this line
    li.classList.add("override"); // added this line
}
function hideDiv(){
    let liList=(document.getElementById("myUL")).getElementsByTagName("li");
    for(var i=0;i<liList.length;i++){
     (liList[i]).style.display="none";
    } 
    li = document.getElementById('myUL'); // added this line
    li.classList.remove("override");  // added this line
}

https://jsfiddle.net/tgq65jas/