我正在尝试进行自动建议搜索。它工作正常,我唯一想要改进的是大小写值。我有以下li
列表
<input type="text" id="filter-search" />
<ul>
<li filter-value="One Is">One Is (Uppercase)</li>
<li filter-value="one is">one is (Lowercase)</li>
<li filter-value="two">Two</li>
<li filter-value="three">Three</li>
<li filter-value="four">Four</li>
<li filter-value="five" >Five</li>
<li filter-value="six">Six</li>
<li filter-value="seven">Seven</li>
<li filter-value="eight">Eight</li>
<li filter-value="nine">Nine</li>
<li filter-value="ten" >Ten</li>
</ul>
<小时/>
var inputId = 'filter-search';
var itemsData = 'filter-value';
var displaySet = false;
var displayArr = [];
function getDisplayType(element) {
var elementStyle = element.currentStyle || window.getComputedStyle(element, "");
return elementStyle.display;
}
document.getElementById(inputId).onkeyup = function() {
var searchVal = this.value.toLowerCase();
var filterItems = document.querySelectorAll('[' + itemsData + ']');
for(var i = 0; i < filterItems.length; i++) {
if (!displaySet) {
displayArr.push(getDisplayType(filterItems[i]));
}
filterItems[i].style.display = 'none';
if(filterItems[i].getAttribute('filter-value').toLowerCase().indexOf(searchVal.toLowerCase()) >= 0) {
filterItems[i].style.display = displayArr[i];
}
}
displaySet = true;
}
第一个li
不可搜索,因为它具有大写值,这里是 code (它的几行)任何人都可以指导我如何解决这个问题。我愿意欣赏。
最佳答案
如果要进行不区分大小写的搜索,请在比较之前将两个字符串都转换为小写:
if(filterItems[i].getAttribute('filter-value').toLowerCase().indexOf(searchVal) >= 0) {
当然,您可以通过将服务器上的 data- 属性值设置为小写值来优化此操作。
关于javascript - 如何仅使用 JavaScript 将属性数据转换为小写?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40242139/