找不到匹配记录时如何在搜索操作中显示“未找到记录”

Question

我有一个搜索选项，我可以在其中搜索页面中的元素，搜索操作正在运行，但我想在它不匹配任何元素时显示“未找到记录”消息

如果任何项目可见，它应该会自动隐藏

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myTableDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        txtValue = a[i].textContent || a[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
        
    }
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown"> <i class="fas fa-table btn dropdown-toggle p-0" onclick="lastSaved();" type="button" id="TabledropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
    <div id="myTableDropdown" class="dropdown-menu Organization_Desg_table_dropdown" aria-labelledby="TabledropdownMenuButton">
        <form>
            <label class="d-flex flex-row mb-0" style="padding: 4px 12px;">
                
                <input type="text" placeholder="Search.." id="myInput" data-live-search="true" onkeyup="filterFunction()">
            </label>
            <hr class="m-0" /> <span id="errmsg"></span>
            <a>
                Designation Name,
            </a>
            <a >
                Mail Alias,
            </a>
            <a >
                Added By,
            </a>
            <a >
                Added Time,
            </a>
            <a >
                Modified By,
            </a>
            <a >
                Modified Time,
            </a>
            <hr class="mt-1 mb-2" />
        </form>
        <div class="d-flex flex-row Organization_Desg_table_item">
            <button>save</button>
        </div>
    </div>
</div>

Answer 1

在你的函数中，你应该确定你是否有结果，你可以只使用一个布尔变量；如果有结果，则清除 errmsg 跨度的文本，否则填充它：

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myTableDropdown");
  a = div.getElementsByTagName("a");
  let noResults = true;
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      noResults = false; // at least one record was found
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }

  document.getElementById("errmsg").innerHTML = noResults ? 'No records found' : '';

}

.error {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown"> <i class="fas fa-table btn dropdown-toggle p-0" onclick="lastSaved();" type="button" id="TabledropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
  <div id="myTableDropdown" class="dropdown-menu Organization_Desg_table_dropdown" aria-labelledby="TabledropdownMenuButton">
    <form>
      <label class="d-flex flex-row mb-0" style="padding: 4px 12px;">
                
                <input type="text" placeholder="Search.." id="myInput" data-live-search="true" onkeyup="filterFunction()">
                
            </label>
      <hr class="m-0" /> <span class="error" id="errmsg"></span>
      <a>
                Designation Name,
            </a>
      <a>
                Mail Alias,
            </a>
      <a>
                Added By,
            </a>
      <a>
                Added Time,
            </a>
      <a>
                Modified By,
            </a>
      <a>
                Modified Time,
            </a>
      <hr class="mt-1 mb-2" />
    </form>
    <div class="d-flex flex-row Organization_Desg_table_item">
      <button>save</button>
    </div>
  </div>
</div>

Answer 2

您可以检查所有锚标签的样式是否为 display:none 然后您可以添加“未找到记录”，如下所示：

function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myTableDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        txtValue = a[i].textContent || a[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
  var isNoRecords = true;
    for (i = 0; i < a.length; i++) {
      if(a[i].style.display != "none") {
        isNoRecords = false;
      }
    }
  if (isNoRecords) {
    document.getElementById("errmsg").innerHTML = 'No records found';
  } else {
    document.getElementById("errmsg").innerHTML = '';
  }
}