css 作为一个初学者，需要使javascript搜索功能不区分大小写

4nkexdtk 于 2023-02-17 发布在 Java

关注(0)|答案(4)|浏览(106)

我真的是新的编程和尝试使我的第一个网站使用的基础知识。我正在尝试做一个搜索/过滤栏搜索/过滤通过一组图像在我的网站上。让我们去与“乔希”。如果我搜索“乔希”，它找到它，但如果我搜索“乔希”或“乔希”它没有。

function search(){
  var searchText = document.getElementById("searchInput").value;
  var images = document.querySelectorAll(".image_container > img");
  
  if(searchText.length > 0){
    images.forEach((image) => {
      image.classList.add("hide");
      if(image.dataset.tags.indexOf(searchText) > -1){
        image.classList.remove("hide");
      }
    });
  }else{
    images.forEach((image) => {
        image.classList.remove("hide");
    });
  }
}

我试着在.indexOf之前使用.toLowerCase（），但这只会让所有的搜索都变得小写，如果我试着在其他地方使用它，它就直接不起作用了。任何帮助都将不胜感激。

css

来源：https://stackoverflow.com/questions/75457921/as-a-total-beginner-need-to-make-a-javascript-search-function-not-case-sensitiv

4条答案

按热度按时间

khbbv19g1#

正如Nina Scholz所说，需要对字符串进行规范化。
你最初的行动是部分正确的，你说你使用了.toLowerCase() before .indexOf，你需要做的是，也使搜索值输入小写。然后一切都会按预期工作。

function search(){
 //Normalize your search text to lowercase
  var searchText = (document.getElementById("searchInput").value).toLowerCase();
  var images = document.querySelectorAll(".image_container > img");
  
  if(searchText.length > 0){
    images.forEach((image) => {
      image.classList.add("hide");
      //Normalize your search targets to lowercase
      if((image.dataset.tags).toLowerCase().indexOf(searchText) > -1){
        image.classList.remove("hide");
      }
    });
  }else{
    images.forEach((image) => {
        image.classList.remove("hide");
    });
  }
}

赞(0）回复(0）举报 2023-02-17

kuhbmx9i2#

对于字符串，您可以使用匹配输入的正则表达式（无论其是下限还是上限），并使用search方法代替indexOf，这就是您可以做到的：

function search(){
    var searchText = document.getElementById("searchInput").value;
    var images = document.querySelectorAll(".image_container > img");
    var regex = new RegExp(searchText, "i");

    if(searchText.length > 0){
      images.forEach((image) => {
        image.classList.add("hide");
        if(image.dataset.tags.search(regex) > -1){
          image.classList.remove("hide");
        }
      });
    }else{
      images.forEach((image) => {
          image.classList.remove("hide");
      });
    }
}

对于数组，您需要使用test方法而不是search，如下所示

if(arr.map(el => regex.test(el)){
  //.....
}

赞(0）回复(0）举报 2023-02-17

wecizke33#

在这种情况下不能使用.indexOf()。
您可以使用数组函数some() (mdn link)。
这里有很多方法可以达到你的目的，就我个人而言，我根本不会使用forEach或some;它们比仅仅使用for(){}循环要慢100 x-1000 x（但是如果你只有几张带有几个标签的图片，那就没关系了）。

function search(){
    var searchTextLowerCase = document.getElementById("searchInput").value.toLowerCase();
    var images = document.querySelectorAll(".image_container > img");
    
    if(searchTextLowerCase.length > 0){
      images.forEach((image) => {
        image.classList.add("hide");
        if( image.dataset.tags.some( tag => tag.toLowerCase() === searchTextLowerCase ) ){
          image.classList.remove("hide");
        }
      });
    }else{
      images.forEach((image) => {
          image.classList.remove("hide");
      });
    }
  }

赞(0）回复(0）举报 2023-02-17

hgqdbh6s4#

使两者都为upper case或两者都为lower case，然后在标记中查找searchText的索引

赞(0）回复(0）举报 2023-02-17