问题：

筛选搜索添加无结果消息

水瀚漠

2023-03-14

当用户搜索没有结果时，如何添加无结果消息。目前，项目列表目前是隐藏的，只有当用户键入正确的单词或字母时才会显示。理想情况下，如果消息位于搜索框下方，则希望no results消息显示为下拉结果，而不是杂乱无章。外面有人能帮忙吗？

null

   
function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");

  for (i = 0; i < li.length; i++) {

    a = li[i].getElementsByTagName("a")[0];
    if (filter!== "" && a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "block";
    } else {
      li[i].style.display = "none";
    }
  }
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

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

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
  <li><a href="www.google.com">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
  
</ul>

</body>
</html>

null

共有1个答案

金秦斩

2023-03-14

您可以有一个包含消息的div，然后根据是否找到搜索结果来显示或隐藏它。

null

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  var found = false;

  for (i = 0; i < li.length; i++) {

    a = li[i].getElementsByTagName("a")[0];
    if (filter !== "" && a.innerHTML.toUpperCase().indexOf(filter) > -1) {

      li[i].style.display = "block";
      found = true;
    } else {

      li[i].style.display = "none";
    }
  }
  document.getElementById("no_result_msg").setAttribute("style", "display:" + (found ? 'none' : 'block'))
}

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

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

#myUL li {
  display: none;
}

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

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>My Phonebook</h2>

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
  <ul id="myUL">
    <div id='no_result_msg'>No Results found</div>
    <li><a href="www.google.com">Adele</a></li>
    <li><a href="#">Agnes</a></li>
    <li><a href="#">Billy</a></li>
    <li><a href="#">Bob</a></li>
    <li><a href="#">Calvin</a></li>
    <li><a href="#">Christina</a></li>
    <li><a href="#">Cindy</a></li>

  </ul>

</body>

</html>

类似资料：

搜索筛选

Navicat 提供筛选功能，让你在连接窗格、对象列表窗格、模型设计器和其他树状结构搜索对象。在连接窗格或其他树状结构，点击该窗格或树来聚焦并直接筛选字符串。如果连接窗格中的连接已打开，筛选也会同时应用到连接中的数据库对象。在对象列表窗格，点击 Navicat 主窗口的，并在搜索框里输入筛选字符串。在模型设计窗口，简单地在搜索框里输入筛选字符串。你可以移除筛选，只需删除筛选字符串。
搜索筛选

“对象筛选”能让你在 Navicat Cloud 筛选模型，在视图设计器中筛选树状结构、以及在画布中筛选包含筛选字符串的表、实体或视图。只需在“搜索”文本框中指定一个筛选字符串。若要移除筛选，只需删除筛选字符串。
搜索筛选

“对象筛选”能让你在 Navicat Cloud 筛选模型，以及在画布中筛选包含筛选字符串的表、实体或视图。只需在“搜索”文本框中指定一个筛选字符串。若要移除筛选，只需删除筛选字符串。 “树筛选”能让你在浏览器或檢视图设计器中筛选包含筛选字符串的树状结构。点击树来聚焦并直接指定筛选字符串。若要移除筛选，只需删除筛选字符串。
搜索筛选

Navicat 提供筛选功能，让你在导航窗格、对象选项卡、模型设计器和其他树状结构搜索对象。在导航窗格或其他树状结构，点击该窗格或树来聚焦并直接输入搜索字符串。如果导航窗格中的连接已打开，筛选也会同时应用到连接中的数据库对象。在对象选项卡，点击，并在“搜索”文本框里输入搜索字符串。在模型设计器窗口，简单地在“搜索”文本框里输入搜索字符串。你只需删除搜索字符串就可移除筛选。
搜索筛选

Navicat 提供筛选功能，让你在导航窗格、对象选项卡、模型设计器和其他树状结构搜索对象。简单地在“搜索”文本框里直接输入搜索字符串。如果导航窗格中的连接已打开，筛选也会同时应用到连接中的数据库对象。你只需删除搜索字符串就可移除筛选。
搜索筛选

Navicat 提供筛选功能，让你在导航窗格、对象选项卡、模型设计器和其他树状结构搜索对象。简单地在“搜索”文本框里直接输入搜索字符串。如果导航窗格中的连接已打开，筛选也会同时应用到连接中的数据库对象。你只需删除搜索字符串就可移除筛选。
无法从select2搜索结果中选择结果

问题内容：我在我的搜索框中使用了select2。我从URL获取结果，但是无法从中选择一个选项。我想使用“ product.productName”作为选择后要显示的文本。有什么我错过的东西或我犯的任何错误。我包括了select2.css和select2.min.js，jquery.js 这是我的resut_object 问题答案：您缺少结果数据的id属性。如果没有，则使选项“不可选择”。例：
搜索/筛选数组

我正在为一个数组做一个搜索函数。我有一个输入[文本]，例如，我把'ban'，然后我需要所有以'ban'开头的结果显示出来，例如香蕉，香蕉奶昔，香蕉（油炸），等等。我该怎么做呢？我试过了，但每次都不准确。我试过的在下面。我有一个非常接近，但当我键入“ban”时，它出现了“aardbei”。这显然是错误的。在这里，也许我忽略了什么？

筛选搜索添加无结果消息

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档