Question

我已经完成向过滤器添加多个关键字的操作，但是它们适用于包含两个关键字的列表中的项目。我想创建一个过滤器，列表中的任何项目都可以匹配关键字之一。例如：

<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>    
<ul> 
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

搜索输入：红色绿色

结果：

红色

绿色

这是我的JQuery搜索功能，它允许多个关键字。搜索功能仅产生项目的最后结果，但允许多个关键字。

$("#mySearchBtn").click(function() {
  var value = $('#myInput').val().toLowerCase();
  var values = value.split(" ");
  var length = values.length
  var cards = $(".card-col-wrapper")

  for (j = 0; j < cards.length; j++) {
    for (i = 0; i < length; i++) {
      $(".card-col-wrapper").filter(function() {

        $(this).toggle($(this).text().toLowerCase().indexOf(values[i]) > -1)
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>

<div class="card-col-wrapper">
  <h3>one</h3>
</div>
<div class="card-col-wrapper">
  <h3>two</h3>
</div>
<div class="card-col-wrapper">
  <h3>three</h3>
</div>

输入：一二

结果：两个

如何编辑搜索功能以使其结果同时为“一个”和“两个”？

Answer 1

您可以按另一个数组的内容过滤一个数组，例如：

    volatile unsigned char data;
    unsigned char h[] ;

    //Function to print string on LCD
    void lcd_string(char *str)
{
    while(*str != '\0')
    {
        lcd_wr_char(*str);
        str++;
    }
}
    void append(char* s, char c)
    {
        int len = strlen(s);
        s[len]=c;
        s[len+1]='\0';
    }

    SIGNAL(SIG_USART2_RECV)         // ISR for receive complete interrupt
    {
        data = UDR2;
        UDR2 = data;
        append(h,data);
    }

    //The main program which has to do the job. 

    int main(void)
    {   
        init_devices();
        lcd_set_4bit();
        lcd_init();
            while(1)
        {
            lcd_cursor(1,1);
            lcd_string(h);
        }       
    }

这意味着在您的情况下，您将执行以下操作：

console.log(
  ['a', 'b', 'c', 'd', 'e', 'f'].filter(
    char => ['b', 'e'].includes(char)
  )
)

$("#mySearchBtn").click(function() {
    const words = $('#myInput').val().toLowerCase().split(/\s+/g);
            
    $(".card-col-wrapper h3").each(function () {
      if (words.includes($(this).text())) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
});

Answer 2

使用Array#includes查看文本是否存在。另外，您需要使用String#trim以确保没有多余的间距。

$("#mySearchBtn").click(function() {
  const value = $('#myInput').val().toLowerCase();
  const values = value.toLowerCase().split(" ");
  const $cards = $(".card-col-wrapper");
  const res = $cards.filter((i, ele) => {
    return values.includes($(ele).text().toLowerCase().trim());
  });
  $(res).toggle();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>

<div class="card-col-wrapper">
  <h3>one</h3>
</div>
<div class="card-col-wrapper">
  <h3>two</h3>
</div>
<div class="card-col-wrapper">
  <h3>three</h3>
</div>

Answer 3

    $(document).ready(function(){
            $("#myInput").on('keyup', function(){
                var value = $(this).val().toLowerCase();
                var arr = value.split(' ');
                $("#val li").each(function () {
                    for(let i=0;i<arr.length;i++){
                        if ($(this).text().toLowerCase().search(arr[i]) > -1) {
                        $(this).show();
                       
                    } else {
                        $(this).hide();
                    }
                    }
                   
                });
            });
       })

<input class="form-control" id="myInput" type="text"  placeholder="Search..">

使用多个关键字使用jQuery过滤列表并允许多个结果

3 个答案: