javascript - 如何在 Javascript 中创建搜索栏以检查项目是否与输入匹配?
问题描述
我正在尝试用 Javascript 制作一个搜索栏,到目前为止它只工作了一点。它将检查 a 标签中是否有输入值,但它也会显示在单词末尾找到它的时间 - 例如 c 将匹配 CSS 和 Javascript(因为 Javascript 中也有 ac)。
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
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";
}
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.left {
flex: 35%;
padding: 15px 0;
}
.left h2 {
padding-left: 8px;
}
.right {
flex: 65%;
padding: 15px;
}
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
<h2>Search Menu</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<div class="row">
<div class="left" style="background-color:#bbb;">
<h2>Menu</h2>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</div>
<div class="right" style="background-color:#ddd;">
<h2>Page Content</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some text..</p>
</div>
</div>
我尝试检查以确保找到的值的索引小于值的长度,但它只工作一次。
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1 && a.innerHTML.toUpperCase().indexOf(filter) < input.value.length) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.left {
flex: 35%;
padding: 15px 0;
}
.left h2 {
padding-left: 8px;
}
.right {
flex: 65%;
padding: 15px;
}
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
<h2>Search Menu</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<div class="row">
<div class="left" style="background-color:#bbb;">
<h2>Menu</h2>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
<ul id="myMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</div>
<div class="right" style="background-color:#ddd;">
<h2>Page Content</h2>
<p>Start to type for a specific category inside the search bar to "filter" the search options.</p>
<p>Some text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some other text..Some text..Some text..Some text..Some text..Some text..Some text..Some text..</p>
<p>Some text..</p>
</div>
</div>
有没有办法做到这一点?
解决方案
改变这个
if (a.innerHTML.toUpperCase().indexOf(filter) > -1)
对此
if (a.innerHTML.toUpperCase().indexOf(filter) === 0)
推荐阅读
- reactjs - 在组件之间传递数据 react-rails
- jenkins - 从团队城市触发 Jenkins 工作并将报告发布到团队城市
- kotlin - 在没有类的 kotlin 文件中将@since 标签放在哪里?
- javascript - javascript中的数组和数据处理
- javascript - 如何在 Safari 中从 iframe 设置 3rd 方 cookie
- python - python中函数的前向声明
- git - Bitbucket 的解决方案 -> 可以构建不同操作系统的管道 -> 部署到硬件
- java - 这个算法的时间复杂度是 O(n) 还是 O(n^2)?
- php - 谷歌图表不显示来自 MySql 数据库的结果
- flutter - Flutter 中的 pushReplacementNamed 和 popAndPushNamed 有什么区别?