Панель поиска: тег привязки, заключенный в теги элементов списка, недоступен для выбора

Question

У меня есть панель поиска в стиле, похожем на панель поиска Google, где она дает предложения, основанные на пользовательском вводе, когда вы печатаете в текстовом поле. Он фильтрует кучу элементов, содержащихся в неупорядоченном списке, и запускает myFunction () ниже для анализа неупорядоченного списка и отображения элементов. Единственная проблема заключается в том, что при нажатии элементов, отображаемых на панели поиска, перенаправление ссылки не работает, и я ДУМАЮ, что это происходит потому, что событие onMouseButtonUp не регистрируется в элементе списка (потому что, когда я нажимаю и удерживаю кнопка вниз, элемент исчезает, если это имеет смысл) ... мысли?

<input style="border-radius: 7px 0px 0px 7px; border-right: 0px; resize: none" id="myInput" onkeyup="myFunction()" name="searchedItem" rows="1" class="form-control" form="searchForm" placeholder="What can we help you find?">
                  <ul id=myUL>
                    <li><a href="http://127.0.0.1:8000/products/{{ obj.productName }}">{{obj.productName}}</a></li>
                  </ul>



<script>
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";
    }

    <!--// This is when you want to find words that start the search string
    /*if (a.innerHTML.toUpperCase().startsWith(filter)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }*/-->
    }
}
</script>