我创建了一个小应用程序,可以帮助我提高工作效率。它按文本内容过滤标签列表。目前,它非常适合查找连续的文本行,但我更愿意将其重新实现为适用于非连续文本组合的过滤器。
例如,如果标签内的字符串是“Appleville, MN”,如果您输入“Apple”或“Appleville”或“App”,当前过滤器将找到它,但我希望能够成功过滤输入“App MN”等。
有人能给我指出正确的方向吗?我不确定我需要使用什么确切的算法。谢谢!
附注:我在下面添加了一些代码,其中包含我正在过滤的搜索项类型、当前过滤功能以及搜索字段的示例。
function filterList() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("itemList");
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";
}
}
}
<input type="text" id="myInput" onkeyup="filterList()" placeholder="Search list..">
<ul id="itemList">
<li onclick=applevilleMN()><a href="#">Appleville, MN</a></li>
<li onclick=orangevilleOR()><a href="#">Orangeville, OR</a></li>
<li onclick=kiwivilleCA()><a href="#">Kiwiville, CA</a></li>
<li onclick=bananavilleCA()><a href="#">Bananaville, CA</a></li>
</ul>
最佳答案
这是一个修改版本,可以满足您的需求。
它将过滤器字符串按空格分割以创建过滤器数组,仅当它们对于数组的每个子字符串都有效时才会显示li
。
function filterList() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("itemList");
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
// split filter by spaces, gives ["app", "MN"] in your example
let filters = filter.split(" ")
// remove the empty filters (if your filter string
// starts or ends by a space) since they are source of errors
// Array.filter takes in parameter a function returning a boolean
// it create a new array containing only element where
// the function returned truthy value
// here we return the length of the string which is falsy (== 0) for ""
// and truthy for every other string (!= 0)
filters = filters.filter(f => f.length)
let shouldDisplay = true
// test each filter and store true only if string contains all filter
filters.forEach(filt => {
shouldDisplay = shouldDisplay && txtValue.toUpperCase().includes(filt)
})
// update visibility
// set visible if the string include all filters
// or if there is no filter
li[i].style.display = (shouldDisplay || filters.length === 0) ? "" : "none";
}
}
<ul id="itemList">
<li onclick=applevilleMN()><a href="#" >Appleville, MN</a></li>
<li onclick=orangevilleOR()><a href="#" >Orangeville, OR</a></li>
<li onclick=kiwivilleCA()><a href="#" >Kiwiville, CA</a></li>
<li onclick=bananavilleCA()><a href="#" >Bananaville, CA</a></li>
</ul>
<input type="text" id="myInput" onkeyup="filterList()" placeholder="Search list.." >
关于javascript - 通过文本字段过滤列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58098566/