錨定鏈接不起作用，模態(tài)不顯示。當(dāng)我單擊搜索欄列表上的項目時，模式應(yīng)該會顯示出來。

如果沒有列表，錨點就像下面有圖像標(biāo)簽的錨點一樣工作。我嘗試了其他選項，比如Java和其他東西，但都不起作用。接下來可以嘗試什么？

var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";

var searchBox = document.getElementById("myInput");

// show the list when the input receive focus
searchBox.addEventListener("focus",  function(){
    // UL.style.display = "block";
});

// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
    UL.style.display = "none";
});


function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    ul = document.getElementById("myUL");
    filter = input.value.toUpperCase();
    // if the input is empty hide the list
    if(filter.trim().length < 1) {
        ul.style.display = "none";
        return false;
    } else {
        ul.style.display = "block";
    }
    
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        
        // This is when you want to find words that contain the search string
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = "";
     } else {
        li[i].style.display = "none";
    } 
        }
}

img {
    width: 250px;
    border-radius: 20px;
    margin: 30px;
}

body {
    background-image: url('wood2.jpg');
}

.overlap {
    position: absolute;
    left: 37%;
    top: 70px;
}

.zoom:hover {
    transform: scale(1.1);
}

.zoom {
    transition: .3s;
}

#preloader {
    background: #FDEEC5 url(loader.gif) no-repeat center;
    background-size: 500px;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}

.overlay_flight_traveldil {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: transform  0.5s;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.3);
    z-index: 2;
  }

  .overlay_flight_traveldil:target {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
  .popup_flight_travlDil {
    margin: 150px auto;
    padding: 20px;
    background: white;
    border-radius: 10px;
    width: 700px;
    position: relative;
    transition: all 2s ease-in-out;
    text-align: justify;
    height: 400px;
    justify-content: space-between;
    display: flex;
  }
  
  .popup_flight_travlDil .close_flight_travelDl {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .popup_flight_travlDil .content_flightht_travel_dil {
    height: 500px;
    font-size: large;
    overflow: auto;
    margin-left: 80px;
    margin-right: 50px;
  }

  #myInput {
    background-image: url('search-icon.png') ;
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 60%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
  }
  
  #myUL {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    width: 60%;
    left: 15%;
  }
  
  #myUL li a {
    border: 1px solid #ddd;
    margin-top: -1px; 
    margin-left: 20%;
    border-radius: 10px;
    background-color: #f6f6f6;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: block;
  }
  
  #myUL li a:hover:not(.header) {
    background-color: #eee;
  }

  .input {
    border-radius: 20px;
    background-size: 20px;
  }

  .search {
    text-align: center;
  }

<div id="popup_flight_travlDil2" class="overlay_flight_traveldil">
            <div class="popup_flight_travlDil">
                <p>
                <img src="Characters/basilio.png" style="width: 200px; margin-left: 20%; margin-top: 40%;">
                <a class="close_flight_travelDl" href="##close">&times;</a>
                <div class="content_flightht_travel_dil">
                    <h2 style="text-align: center;">Basilio</h2>
                    Ang mag-aaral sa medisina at ang kasintahan ni huli. Siya rin ang isa sa anak ni Sisa at kapatid ni Crispin. Kalaunan ay naging kakampi niya si Simoun/Ibarra. <br> <br>
                    Nalampasan niya ang mga hilahil ng buhay dahil nagpaalipin siya kay Kapitan Tiago. Nagpunyagi siya sa pag-aaral. Nilunok niya ang pangmamaliit sa kanya ng kapwa mag-aaral at ng mga guro dahil sa kanyang anyo at kalagayan sa buhay. <br> <br>
                    Nagtagumpay siya at nakapanggamot agad kahit hindi pa natatanggap ang diploma ng pagtatapos.
                </p>
                </div>
            </div>
        </div>

<center>
            <div>
                <img src="download.png" style="width: 720px; margin: 0%;">
                <div class="overlap"> <font face="october twilight" size="10"> Mga Tauhan </font> </div> <br>
                <a href="kabanata.html"> <img class="zoom" src="kabanata3.png" style="width: 100px; left: 0%; top: 3%; position: absolute;" ></a>
                <a href="talambuhay.html"> <img class="zoom" src="talambuhay3.png"style="width: 100px; left: 13%; top: 0%; position: absolute;"> </a>
                <a href="main.html"> <img class="zoom" src="home3.png" style="width: 85px; right: 11%; top: 3%;position: absolute;"> </a>
                <a href="awtputs.html"> <img class="zoom" src="awtputs3.png" style="width: 100px; right: 0%; top: 3%; position: absolute;"> </a>
            </div> <br>
            <div class="search">
                <input type="text" class="input" id="myInput" onkeyup="myFunction()" placeholder="Search Characters.." autocomplete="off" title="Type in a name">
                <ul id="myUL">
                  <li><a href="#popup_flight_travlDil1"> Armendia</a></li>
                  <li><a class="button" href="#popup_flight_travlDil2"> Basilio</a></li>

</ul>
                </div> <br>
        <a class="button" href="#popup_flight_travlDil1"> <img class="zoom" src="Character Card/armendia.jpg"> </a>
        <a class="button" href="#popup_flight_travlDil2"> <img class="zoom" src="Character Card/basilio.jpg"> </a>
</center>