用于过滤页面上单词的简单功能

Question

>我为状态的搜索标题编写函数，一切都很完美，但是当我在搜索栏中输入字母时，过滤器会查找单词中的所有字母。我想从开头的单词进行过滤器搜索。

例

如果我输入一个过滤结果将是 C'an'ada，他会找到一个并且没问题，但我只想从头开始检查

function filterNames() {
    let filterValue = document.getElementById('filterInput').value.toUpperCase();
    let kartice = allContinet;
    let h2 = document.querySelectorAll('h2');
    for (let i=0;i<h2.length;i++) {
        let name = h2[i].getElementsByClassName("ime-zemlje");
        if (name[0].innerHTML.toUpperCase().indexOf(filterValue) > -1) {
            kartice[i].style.display = '';
        } else {
            kartice[i].style.display = 'none';
        }
    }
}

Answer 1

您可以使用

.search String的方法。

所以你的if状况会变成

if(name[0].innerHTML.toUpperCase().search(new RegExp(`^${filterVal}`)) === 0)

search也有很好的浏览器支持

Answer 2

您可以使用

startsWith而不是indexOf

if (name[0].innerHTML.toUpperCase().startsWith(filterValue)) { }

这是 ES2015+ 的一项功能。如果您的浏览器不支持，您可以添加此填充代码

或者，您可以将正则表达式与 ^ 和 i 标志一起使用，以仅匹配那些以大小写filterValue不重复开头的字符串：

var regex = new RegExp('^' + filterValue, 'i')
if(regex.test(name[0].innerHTML)) {
}

Answer 3

function filterNames() {
    var filterValue = document.getElementById('filterInput').value;
    
    //console.log(filterValue);
    var h2 = document.querySelectorAll('h2.ime-zemlje');//for h2+sime-zemlje class
    for (var i=0;i<h2.length;i++) {
        //console.log(h2[i].innerText);
        if(filterValue.length<1){
          h2[i].innerHTML=h2[i].innerText;
          continue;
        }
        var GD=h2[i].innerText;
        var QQ="";
        var pos = 0;
        while (pos != -1) {
          pos = GD.indexOf(filterValue, 0);
          //console.log(pos);
          if(pos!=-1){
            QQ+=GD.substring(0, pos);//Add Back Normal Word
            QQ+='<span style="color: red;">'+GD.substring(pos, pos+filterValue.length)+'</span>';//Add Back Search Word And Be Colorful
            GD=GD.substring(pos+filterValue.length, GD.length);//Remove Add Back Word Then Next Loop Not Search Again
          }
        }
        h2[i].innerHTML=QQ+GD;
        
        
        
        
        //console.log(QQ+GD);
    }
}

<input type="text" id="filterInput" onchange="filterNames()"></input>
<h2 class="ime-zemlje">I Love Little Girl</h2>
<h2 class="ime-zemlje">I Love Loli</h2>
<h2 class="QQQQQQ">I Scared FBI</h2>

在爱中键入或我，你会看到你想要的