Question

我只想弄清楚如何隐藏列表搜索项，直到在搜索栏中输入至少1个字符，而不是在输入任何内容之前显示所有列表。提前感谢您提供的任何帮助，我已经试图在几周内解决这个问题

以下是我正在做的事情的一个例子：

＆＃13;

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 (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";

    }
  }
}

＆＃13;

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 94%;
  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: 14px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

＆＃13;

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search " title="Type in a name">

<ul id="myUL">
  <li><a href="http://google.com/" target="_blank" rel="external nofollow">test 1</a></li>
  <li><a href="http://google.com/ "target="_blank" rel="external nofollow">test 2</a></li>
  <li><a href="http://google.com/" target="_blank" rel="external nofollow">test 3</a></li>
  <li><a href="http://google.com/ "target="_blank" rel="external nofollow">test 4</a></li>
  <li><a href="http://google.com/" target="_blank" rel="external nofollow">test 5</a></li>
  <li><a href="http://google.com/" target="_blank" rel="external nofollow">test 5.5</a></li> 		
</ul>

＆＃13;

Answer 1

在 CSS 中使用display: none;作为您的LI元素 - 默认隐藏它们。
仅在 JavaScript 中将LI项目设置为 display "block"
1. 输入值有长度
2. 它的（LI）文本包含输入值

（伪代码为：display = inputValue && containsText ? "block" : "none"）

隐藏所有其他不匹配的 LI元素

const input = document.getElementById("myInput"); // Cache your elements!
const li = document.querySelectorAll("#myUL li");

const suggest = () => {
  const val = input.value.trim(),       // Trim the value. Don't fool sloppy users
        reg = new RegExp(val, "i");     // "i" = Case insensitive
  [...li].forEach(el => el.style.display = val && reg.test(el.textContent) ? "block" : "none");
};

input.addEventListener("input", suggest); // (Don't use inline JS in HTML)

#myUL li {display: none;} /* HIDE BY DEFAULT */

<input type="text" id="myInput" placeholder="Search " title="Type in a name">

<ul id="myUL">
  <li><a>test 1</a></li>
  <li><a>test 2</a></li>
  <li><a>test 2.1</a></li>
  <li><a>test 3</a></li>
  <li><a>test 4</a></li>
  <li><a>test 5</a></li>
  <li><a>test 5.5</a></li>
</ul>

Answer 2

也许这不是最好的解决方案，但它可以工作。希望可以帮到你。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=400, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 94%;
  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: 14px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>
</head>
<body>
<h2>.</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search " title="Type in a name">


<ul id="myUL">

        <li><a href="http://google.com/"target="_blank" rel="external nofollow"">test 1</a></li>
        <li><a href="http://google.com/"target="_blank" rel="external nofollow"">test 2</a></li>
        <li><a href="http://google.com/"target="_blank" rel="external nofollow"">test 3</a></li>
        <li><a href="http://google.com/"target="_blank" rel="external nofollow"">test 4</a></li>
        <li><a href="http://google.com/"target="_blank" rel="external nofollow"">test 5</a></li>
        <li><a href=http://google.com/"target="_blank" rel="external nofollow"">test 5.5</a></li>

<script>
disapper();
function disapper(){
	var ele = document.getElementsByTagName('li');
	for( var i = 0; i < ele.length; i++) {
		ele[i].style.display = 'none';
	}
}
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 === '') {
        	disapper();
        	return;
        }
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

</script>

</body>
</html>

Answer 3

这样做

将css中#myUL的默认样式设置为隐藏，如此

#myUL {
  display: none;  /* #myUL is hidden by default */
}

然后使用jquery do

在你的javascript文件上

$("#myInput").keyup(function(){   // When a user releases a key from keyboard
  if ($("#myInput").val())   // If field not empty
    $("myUL").show();  // Show list
  else                       // If field is empty
    $("myUL").hide();  // Hide list
});

不要忘记在你的html文件中包含jQuery文件。重要事项在包含任何javascript代码之前，必须首先添加jQuery，因此您可能希望在最顶部添加或在最底部添加它并在末尾包含脚本标记

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

输入自动填充 - 隐藏项目，直到输入值

3 个答案: