代码之家 › 专栏 › 技术社区 › clestcruz

如何使用输入检查数组中的值或粒子?

html jquery javascript

clestcruz · 技术社区 · 6 年前

inside 中的输入 array 对于任何部分匹配,则添加一个类 display

例如,如果我在输入框中键入以下内容:

构建Web应用程序John James

它将获取数组内任何部分匹配的所有值。然后循环所有 name 类来添加名为 . 如果没有一个匹配项,它将删除该类 显示

$(".task-label input").on("change keyup paste", function(){
        let handles = ['john', 'jake', 'james'];

             
        for(let elements of handles ) {

  
            if (elements.includes($('.task-label input').value())) {
                $('.name-'+ elements).addClass();
              } else {
                console.log('no match');
            }

  
          }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="task-label">
        <input id="name" type="text" name="name">
      </div>
      
      <ul class="name-list">
        <li id="john" class="name name-john">@John</li>
        <li id="jake" class="name name-jake">@Jake</li>
        <li id="alex" class="name name-alex">@Alex</li>
        <li id="allison" class="name name-allison">@Allison</li>
      </ul>

1 回复 | 直到 6 年前

Icewine 6 年前

如果我是你,我会这样做的。

首先,我将把列表中的类更改为数据属性。

注意:这不考虑大写/小写。你需要实现更多的代码才能工作。

$(".task-label input").on("change keyup paste", function() {
  
  // check for special characters
  var letters = /^[0-9a-zA-Z]+$/;
  
  // get input and convert to array
  var searchFor = $(this).val().split(" ");
  
  // clear the display class before a new search to reset
  $(".name-list").find('li').removeClass("display");
  
  // search the list from the elements in the array
  for(var el of searchFor){
  
    var name = "[data-name*="+el+"]";
    
    // make sure not empty or special char before finding the name
    if(el.match(letters)){
      $(".name-list").find(name).addClass("display");
    }
    
  }
  
});

.display {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="name-list">
  <li id="john" class="name" data-name="john">@John</li>
  <li id="jake" class="name" data-name="jake">@Jake</li>
  <li id="alex" class="name" data-name="alex">@Alex</li>
  <li id="allison" class="name" data-name="allison">@Allison</li>
</ul>

<div class="task-label">
  <input id="name" type="text" name="name">
</div>

Abhishek Bag 6 年前

elements.includes($('.task-label input').val()) 到 $('.task-label input').val().includes(elements) 因为如果这些预定义的名称存在于用户输入中的任何地方,那么您将添加该类。希望这有帮助。。

Murali Nepalli 6 年前

获取文本输入值的jquery函数的名称是val(),而不是value()。无论如何,您不需要使用jquery来获取它的值。请参考“这个值“在处理程序中。下面的实现检查部分匹配,并且不区分大小写。

$(".task-label input").on("change keyup paste", function(){
  let handles = ['john', 'jake', 'james'];
  for(let elements of handles ) {         
     if (elements.includes(this.value.toLowerCase())) {
        console.log("matched with " + elements);
        $('.name-'+ elements).addClass();
     }else {
        console.log("no-match");
     }         
  }  
})

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前