小贝子编程

搜索Enigne功能



我正试图通过一项任务创建一个小型搜索引擎。我试着摆弄它，但我卡住了。我需要在开始时隐藏所有50个结果，然后当这个人开始搜索时，结果会缩小。我已经被这个问题困扰了一段时间，并试图在谷歌上搜索一些答案，但没有真正得到任何可靠的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="A5.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
</head>
<body>

<div class="navbar">
<a class="active" href="#"><i class="fas fa-home"></i></a>
<div class="dropdown">
<a href="#" class="dropdown-link"><i class="fas fa-shopping-cart"></i></a>
<div class="dropdown-content">
<a href="#">Currency Exchange</a>
<a href="#">Service 3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-link"><i class="fas fa-envelope"></i></a>
<div class="dropdown-content">
<a href="#"><i class="fas fa-flag"></i> Contactez-nous</a>
<a href="#"><i class="fas fa-flag"></i> Contacta con nosotros</a>
</div>
<a href="#"><i class="fas fa-user"></i></a>
</div>

<p>Welcome to the DesmoSearch!</p>
<input type="text" id="myInput" onkeyup="myFunction" placeholder="Search for places...">
<ul id="myUL">
<li><a href="#">Argentina</a></li>
<li><a href="#">Austria</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Bolivia</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Chile</a></li>
<li><a href="#">Colombia</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">England</a></li>
<li><a href="#">Finland</a></li>
<li><a href="#">France</a></li>
<li><a href="#">Gabon</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">Greece</a></li>
<li><a href="#">Iceland</a></li>
<li><a href="#">Italy</a></li>
<li><a href="#">Japan</a></li>
<li><a href="#">Jordan</a></li>
<li><a href="#">Kenya</a></li>
<li><a href="#">Kuwait</a></li>
<li><a href="#">Laos</a></li>
<li><a href="#">Latvia</a></li>
<li><a href="#">Libya</a></li>
<li><a href="#">Madagascar</a></li>
<li><a href="#">Mali</a></li>
<li><a href="#">Monaco</a></li>
<li><a href="#">Morocco</a></li>
<li><a href="#">Nepal</a></li>
<li><a href="#">New Zealand</a></li>
<li><a href="#">Nigeria</a></li>
<li><a href="#">North Korea</a></li>
<li><a href="#">Norway</a></li>
<li><a href="#">Pakistan</a></li>
<li><a href="#">Panama</a></li>
<li><a href="#">Paraguay</a></li>
<li><a href="#">Peru</a></li>
<li><a href="#">Poland</a></li>
<li><a href="#">Portugal</a></li>
<li><a href="#">San Marino</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">South Korea</a></li>
<li><a href="#">Spain</a></li>
<li><a href="#">Sweden</a></li>
<li><a href="#">Thailand</a></li>
<li><a href="#">Turkey</a></li>
<li><a href="#">Tuvalu</a></li>
<li><a href="#">Uganda</a></li>
<li><a href="#">United States</a></li>
<li><a href="#">Uruguay</a></li>

</ul>
<script src="" async defer>
function myFunction(){
var input, filter, ul, li, a, i, txtValue;
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];
txtValue = a.textContent || a.innerText;
if(txtValue.toUpperCase().indexOf(filter) >-1){
li[i].style.display = "";
}else{
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>

.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}

.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {
background-color: #000;
}

.active {
background-color: #04AA6D;
}

.dropdown-link {
background-color: #04AA6D;
color:white;
padding: 16px;
font-size: 16px;
border: none;
}

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

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropdown-link {
background-color: #3e8e41;
}

#myInput {
background-image: url('https://fontawesome.com/v5.15/icons/search?style=solid');
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;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}

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

@media screen and (max-width:500px){
.navbar a {
float: none;
display: block;
}
}

我运行了您的应用程序并修复了一些小错误。

  1. 呼叫"myFunction((">
  2. 从<script>标签中删除src=""

您可以运行下面的代码来查看应用程序的运行情况。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="A5.css"> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<style>
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}

.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {
background-color: #000;
}

.active {
background-color: #04AA6D;
}

.dropdown-link {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}

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

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropdown-link {
background-color: #3e8e41;
}

#myInput {
background-image: url('https://fontawesome.com/v5.15/icons/search?style=solid');
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;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}

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

@media screen and (max-width:500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#"><i class="fas fa-home"></i></a>
<div class="dropdown">
<a href="#" class="dropdown-link"><i class="fas fa-shopping-cart"></i></a>
<div class="dropdown-content">
<a href="#">Currency Exchange</a>
<a href="#">Service 3</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-link"><i class="fas fa-envelope"></i></a>
<div class="dropdown-content">
<a href="#"><i class="fas fa-flag"></i> Contactez-nous</a>
<a href="#"><i class="fas fa-flag"></i> Contacta con nosotros</a>
</div>
<a href="#"><i class="fas fa-user"></i></a>
</div>
<p>Welcome to the DesmoSearch!</p>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for places...">
<ul id="myUL">
<li><a href="#">Argentina</a></li>
<li><a href="#">Austria</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Bolivia</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">Chile</a></li>
<li><a href="#">Colombia</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">England</a></li>
<li><a href="#">Finland</a></li>
<li><a href="#">France</a></li>
<li><a href="#">Gabon</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">Greece</a></li>
<li><a href="#">Iceland</a></li>
<li><a href="#">Italy</a></li>
<li><a href="#">Japan</a></li>
<li><a href="#">Jordan</a></li>
<li><a href="#">Kenya</a></li>
<li><a href="#">Kuwait</a></li>
<li><a href="#">Laos</a></li>
<li><a href="#">Latvia</a></li>
<li><a href="#">Libya</a></li>
<li><a href="#">Madagascar</a></li>
<li><a href="#">Mali</a></li>
<li><a href="#">Monaco</a></li>
<li><a href="#">Morocco</a></li>
<li><a href="#">Nepal</a></li>
<li><a href="#">New Zealand</a></li>
<li><a href="#">Nigeria</a></li>
<li><a href="#">North Korea</a></li>
<li><a href="#">Norway</a></li>
<li><a href="#">Pakistan</a></li>
<li><a href="#">Panama</a></li>
<li><a href="#">Paraguay</a></li>
<li><a href="#">Peru</a></li>
<li><a href="#">Poland</a></li>
<li><a href="#">Portugal</a></li>
<li><a href="#">San Marino</a></li>
<li><a href="#">South Africa</a></li>
<li><a href="#">South Korea</a></li>
<li><a href="#">Spain</a></li>
<li><a href="#">Sweden</a></li>
<li><a href="#">Thailand</a></li>
<li><a href="#">Turkey</a></li>
<li><a href="#">Tuvalu</a></li>
<li><a href="#">Uganda</a></li>
<li><a href="#">United States</a></li>
<li><a href="#">Uruguay</a></li>
</ul>
<script async defer>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
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];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium