要使用JavaScript筛选项目列表（li）以获得部分匹配，而不是精确匹配（短语）

考虑以下功能：

//This piece of code works for exact word match but I want something more of a partial match.
    function filterItems(ev) {
        let text = ev.target.value.toLowerCase();
        let items = item_list.getElmentsByTagName("li");
        Array.from(items).forEach(item => {
         let item_name = item.firstChild.textContent;
         if(item_name.toLowerCase().indexOf(text) !== -1) {
            item.style.display = "block";
         } else {
            item.style.display = "none";
         }
      })
    }

下面是我想做的，比如对搜索短语本身使用过滤器

function filterItems(ev) {
     let text = ev.target.value.toLowerCase();
     let items = item_list.getElmentsByTagName("li");
     Array.from(items).forEach(item => {
        let item_name = item.firstChild.textContent;
        if(item_name.toLowerCase().split("").filter(ch => ch.indexOf(text) !== -1)) {
                item.style.display = "block";
             } else {
                item.style.display = "none";
             }
          })
        }

---

它是否接近我要做的，它似乎没有响应浏览器上的这段代码

从你上次的评论来看，我相信这达到了你想要的行为。 My

this.target

是您的

text

变量。您可以在forEach项循环中调用以下

doesFilterMatchTarget（）

为了进一步解释，我添加了内联注释

  function doesFilterMatchTarget(filter) {
    filter = filter.toLowerCase();

    if (filter.length === -1) { //empty state should not match
      return false;
    }

    let currentTarget = this.target; //initialise to your starting target e.g. 'list 01'

    for (let i = 0; i < filter.length; i++) {
      //call our helper function below to check and update our target word
      currentTarget = this.updateTargetWord(currentTarget, filter[i]);
      if (currentTarget === null) {
        return false;
      }
    }

    return true; //we have looped through every letter and they were all found in a correct location
  }


  function updateTargetWord(currentTarget, letterToSearchFor) {
    let index = currentTarget.search(letterToSearchFor);
    if (index === -1) {
      return null; //the letter was not in the target
    }

    // then we want to return the remainder of this target string from the next character to the end of the string
    return currentTarget.substring(index + 1, currentTarget.length);
  }

函数doesFilterMatchTarget（过滤器）{
filter=filter.toLowerCase（）；
如果（filter.length==-1）{//empty状态不应匹配
返回false；
}
让currentTarget=this.target；//初始化为起始目标，例如“list 01”
for（设i=0；i

---

注意：这可能会被优化，但它似乎会返回您想要的结果。

您可以在这里利用正则表达式和i标志，i标志将忽略大小写，以使用动态正则表达式。我们在这里使用构造函数

function filterItems(ev) {
 const regExp = new RegExp(`[${ev.target.value}]`, 'i');
 let items = item_list.getElmentsByTagName("li");
 Array.from(items).forEach(item => {
    let item_name = item.firstChild.textContent;
    if(regExp.test(item_name)) {
            item.style.display = "block";
         } else {
            item.style.display = "none";
         }
      })
    }

如果您希望在搜索框为空时显示所有项目，则应为空

      function filterItems(ev) {
    // using regex
    let regExp = new RegExp(`[${ev.target.value}]`, 'i');
    // converting text to lowerCase
    // let text = ev.target.value.toLowerCase();
    // get ul li elemnts
    let items = item_list.getElementsByTagName("li");
    // Convert it to an array
    Array.from(items).forEach(item => {
      let item_name = item.firstChild.textContent;
      if (!ev.target.value || regExp.test(item_name)) {
        item.style.display = "inline-block";
      } else {
        item.style.display = "none";
      }
    });
  }

---

真的不清楚你想在这里做什么。

text

如何成为

ch

字符的一部分？你能举个例子说明你想要完成什么吗？@raina77ow是的，“ch”应该是“text”的一部分，如果它存在的话。例如：-列表01-列表02，我想对搜索短语进行部分匹配，例如“lst1”或“ls”或“01”或“02”，而不是“列表01”或“列表02”，它们是精确的搜索短语匹配！！希望这有意义！！感谢您的关注，我非常感谢：）非常感谢您的关注，我非常感谢这种RegExp方法。这是我到目前为止所得到的信息，您是否介意查看一下，看看它为什么没有按预期运行！！我正在查看代码笔，我相信您希望筛选出搜索框中没有任何字符的项目，对吗？您的css for true condition应该是item.style.display=“inline block”；而是item.style.display=“block inline”；如果您使用我添加的替代代码，其中css被更正，并且在搜索框为空时，您可能希望列出所有项目。真棒Rajanikant，非常感谢：）我本应该自己破解的，但我还是非常感谢你的解决方案：）非常感谢你调查此事，不知道为什么我之前的评论不知怎么消失了！！不管怎么说，在使用了您提供的代码之后，这就是它现在所在的位置。请您自己看看，看看它需要更多编辑的地方！！再次感谢