【发布时间】：2023-02-20 18:18:12
【问题描述】：
我想只使用 html、css 和 java 脚本在 php 文件中创建一个搜索栏。虽然即使是最简单的代码也可以在 html 文件中工作，但它们在 php 文件中不起作用。此处的目标是搜索栏可以搜索 ul 列表，而该列表仅显示与搜索栏中输入的内容相似的结果。实际上有点像通用文件系统搜索栏。当我将我的代码放在一个 html 文件中时，它可以完美地工作，但是当它在 php 文件中使用时，完全相同的代码不会对搜索栏中的输入做出反应。
我试着让代码尽可能简单，但它仍然不能像 php 文件一样工作。我不认为 html 代码有问题，因为它作为 html 文件工作，但是有人知道在 php 文件中正确使用它的方法吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
form {
background-color: #990000;
width: 300px;
height: 44px;
border-radius: 5px;
display:flex;
flex-direction:row;
align-items:center;
}
input {
all: unset;
font: 18px system-ui;
color: #fff;
height: 100%;
width: 100%;
padding: 6px 10px;
}
::placeholder {
color: #fff;
opacity: 0.7;
}
svg {
color: #fff;
fill: currentColor;
width: 24px;
height: 24px;
padding: 10px;
}
button {
all: unset;
cursor: pointer;
width:44px;
height:44px;
}
</style>
</head>
<body>
<header>
<h2>Search</h2>
<form role="search" id="form">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..." title="Type in a name">
<button>
<svg viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
</header>
<ul id="myUL">
<li><a href="#">Change Date Format</a></li>
<li><a href="#">Change First Day of the Week</a></li>
<li><a href="#">Change Font Size</a></li>
<li><a href="#">Change Language</a></li>
<li><a href="#">Change Time Format</a></li>
</ul>
<script>
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>
【问题讨论】：
-
我没有看到任何 PHP 代码，所以我想第一个问题是您是否向我们展示了 PHP 文件
标签： php uisearchbar