问题:为什么我必须点击两次才能在搜索结果菜单中获得链接来加载页面？

请参阅此处:在筛选字段中键入Staff或Blog。 你必须点击每个链接两次才能加载页面？ https://startech-enterprises.github.io/docs/data-integration-and-etl/branch-and-loops-local.html

我正在尝试实现此行为（只需单击一次）:https://docs.microsoft.com/en-us/dotnet/csharp/linq/

注:根据下面给出的答案，上面链接中的代码现已更新

代码

我正在使用的JS

/**
* Search Filter
*/

"use strict";
(function searchFilter() {

    eventListeners();

    // Add Event Listerns
    function eventListeners(){
        document.getElementById('searchFilter').addEventListener('keyup', searchQuery);
        document.getElementById('searchFilter').addEventListener('focusout', searchQuery);
        document.getElementById('searchFilter').addEventListener('focusin', searchQuery);
    };

    function searchQuery(){

        // Declare variables
        let input, filter, ul_toc, li_toc, ul_suggestions, li_suggestion, a1, a2, a3, i, j, k, txtValue, txtValue2, txtValue3, link;

        input = document.getElementById('searchFilter');
        filter = input.value.toUpperCase();
        ul_toc = document.getElementsByClassName("toc")[0];
        li_toc = ul_toc.getElementsByClassName("none");
        ul_suggestions = document.getElementsByClassName("searchFilter-suggestions")[0];

        // Check whether input is empty. If so hide UL Element
        if (filter === "") {
            ul_suggestions.classList.add("is-hidden")
        };

        // Check whether input is not empty. If so show UL Element
        if (filter !== "") {
            ul_suggestions.classList.remove("is-hidden")
        };

        // Check whether input is not active. If so hide UL Element
        if (input !== document.activeElement) {
            setTimeout(function(){
            ul_suggestions.classList.add("is-hidden");
            }, 2000);
        };

        // Check whether input is active. If so show UL Element
        if (input === document.activeElement) {
        ul_suggestions.classList.remove("is-hidden")
        };

        // Keep emptying UL on each keyup event, or when input element is not active
        ul_suggestions.innerHTML = "";

        let df = new DocumentFragment(); 

        // Run search query so long as filter is not an empty string
        if(filter !== ""){
            // Loop through all list items, and update document fragment for those that match the search query
            for (i = 0; i < li_toc.length; i++) {
                a1 = li_toc[i].getElementsByTagName("a")[0];
                txtValue = a1.textContent || a1.innerText;

                if (txtValue.toUpperCase().indexOf(filter) > -1) {  

                    // Start creating internal HTML
                    li_suggestion = document.createElement('li');
                    li_suggestion.classList.add("searchFilter-suggestion");

                    // Parent span element
                    let span = document.createElement("SPAN");
                    span.className = ("is-block is-size-7 has-padding-left-small has-padding-right-small");
                    link = document.createElement('a');
                    link.href = a1.href;
                    span.appendChild(link);

                        // Child 1 span element
                        let span2 = document.createElement("SPAN");
                            span2.className = ("is-block has-overflow-ellipsis-tablet");
                            span2.textContent = txtValue;

                        // Child 2 span element
                        let span3 = document.createElement("SPAN");
                            span3.className = ("is-block has-text-subtle has-overflow-ellipsis is-size-8 has-line-height-reset has-padding-bottom-extra-small");

                            j = 0;
                            let immediateParent = li_toc[i].parentElement;
                            let correctParent = li_toc[i].parentElement;

                            // Get top most level of branch --> Set as Node 1
                            while(true){
                                if (immediateParent.parentElement.classList.contains('toc')) break;
                                immediateParent = immediateParent.parentElement;
                                j++;
                            };
                            if (j == 0){
                                a2 = li_toc[i].getElementsByTagName("a")[0];
                            } 
                            else {
                                k = 0;
                                for ( k = 0; k < j - 1; k++) {
                                    correctParent = correctParent.parentElement;
                                };

                                a2 = previousByClass(correctParent, "treeitem");
                                a2 = child_by_selector(a2, "tree-expander")
                            }
                            txtValue2 = a2.textContent || a2.innerText;
                            txtValue2 = document.createTextNode(txtValue2);

                            // Insert Chevron Right --> Set as Node 2
                            let span4 = document.createElement("SPAN");
                            span4.className = ("has-padding-right-extra-small has-padding-left-extra-small");
                            span4.innerHTML =  '&nbsp&#9002&nbsp';
                            span4.setAttribute("style", "font-size: 0.70rem; font-weight: bold");

                            // Get second-top most level of branch --> Set as Node 3
                            correctParent = li_toc[i].parentElement;
                            switch (j) {
                                case 0:
                                    a3 = "";
                                break;
                                case 1:
                                    a3 = li_toc[i].getElementsByTagName("a")[0];
                                default: {
                                    k = 0;
                                    for ( k = 0; k < j - 2; k++) {
                                        correctParent = correctParent.parentElement;
                                    };

                                    a3 = previousByClass(correctParent, "treeitem");
                                    a3 = child_by_selector(a3, "tree-expander")
                                    }
                                }   

                            if (a3 != ""){
                                txtValue3 = a3.textContent || a3.innerText;
                                txtValue3 = document.createTextNode(txtValue3);
                                span3.appendChild(txtValue2);
                                span3.appendChild(span4);
                                span3.appendChild(txtValue3);
                            } else {
                                span3.appendChild(txtValue2);
                            }
                        span.firstChild.appendChild(span2);
                        span.firstChild.appendChild(span3); 

                    li_suggestion.appendChild(span);
                    df.appendChild(li_suggestion)
                } 
            }
             // Output HTML, and remove is-hidden class
             ul_suggestions.appendChild(df);
        }
    }
})();

// WAIT TILL DOCUMENT HAS LOADED BEFORE INITIATING FUNCTIONS
document.addEventListener('DOMContentLoaded', searchFilter);

我正在使用的CSS:

    /* Search Filter */
    .filter-icon{
      display: inline-block;
      height:0.9rem;
      width: 1.0rem;
      text-transform: none;
      text-align: center;
    }

    .searchFilter {
      display: inline-block;
      position: relative;
    }

    .searchFilter-input {
      padding-right: 26px;
    }

    .searchFilter-suggestions {
      list-style-type: none;
      z-index: 1;
      position: absolute;
      max-height: 18rem;
      min-width: 100%;
      max-width: 100%;
      padding: 0;
      margin: 2px 0 0 !important;
      cursor: default;
      box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132),0 .3px .9px 0 rgba(0,0,0,0.108);
      border: 1px solid #e3e3e3;
      background-color: white;
    }

    @media screen and (min-width: 768px), print {
      .searchFilter-suggestions {
        max-width: 500px;
      }
    }

    .searchFilter-suggestion {
      display: block;
      border: 1px solid transparent;
    }

    .searchFilter-suggestion a {
      color: rgb(23, 23, 22);
      text-decoration: none;
    } 

    .searchFilter-suggestion:hover{
      background-color: #f2f2f2;;
      border: 1px solid rgba(0,0,0,0);
    }

    .is-hidden {
      display: none !important;
    }

HTML中与UL相关的部分，用于加载搜索结果:（由JS生成的搜索结果文档片段被加载到UL中，并带有searchFilter-suggestions类）

form class = "has-margin-bottom-small" action="javascript:" role="search">
    <label class="visually-hidden">Search</label>
        <div class="searchFilter is-block">
            <div class="control has-icons-left">
            <input id="searchFilter" class="searchFilter-input input control has-icons-left is-full-width is-small" role="combobox" maxlength="100" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="Filter by title" type="text">
            <span class="icon is-small is-left">
            <img src="/../docs/assets/images/filter.png" class="filter-icon">
            </span>
            </div>
        <ul class="searchFilter-suggestions is-vertically-scrollable is-hidden"></ul>
    </div>
</form>