Question

我遇到问题，如果在输入字段中输入，我的程序会突出显示单词。它不会突出显示两者中的单词。（示例Input1类型＆＃34; Test1＆＃34;，Input2类型＆＃34; Test2＆＃34;）有一种方法可以在用户切换到另一个字段时保持突出显示的单词在一个字段中处于活动状态？

JSBIN：http://jsbin.com/xovisayaso/edit?html,css,js,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


  <title>JS Bin</title>
</head>
<body>



<div id="listArray">
<span>Test1</span>  
<span>Test2</span>
<span>Test3</span> 
</div>

<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">

</body>
</html>

<script
$("#userArray, #userArray2").on('change keyup paste', function() {

    var input = $(this).val().toLowerCase().split(" ");
    $('#listArray span').each(function(){
      $(this).removeClass('active');
        if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
        $(this).addClass('active');}});});
</script>

<style>#list_input > div { border:4px solid; padding: 1em; margin: 1em auto; }
#listArray { overflow: auto; }
#listArray span { display: block; float: left; clear: left; padding:4px; margin:1px; }
#listArray span.active { background: green; }
}
</style>

Answer 1

通过在文本更改时删除活动类，然后检查两个输入，可以实现所需的效果：

＆＃13;

$("#userArray, #userArray2").on('change keyup paste', function() {
  $('#listArray span').removeClass('active');
  $('input').each(function() {
    var input = $(this).val().toLowerCase().split(" ");
    $('#listArray span').each(function() {
      if ($.inArray($(this).text().toLowerCase(), input) != -1) {
        $(this).addClass('active');
      }
    });
  });
});

＆＃13;

#list_input > div {
  border: 4px solid;
  padding: 1em;
  margin: 1em auto;
}
#listArray {
  overflow: auto;
}
#listArray span {
  display: block;
  float: left;
  clear: left;
  padding: 4px;
  margin: 1px;
}
#listArray span.active {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listArray">
  <span>Test1</span> 
  <span>Test2</span>
  <span>Test3</span> 
</div>

<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">

＆＃13;

Answer 2

试试这段代码：

$("#userArray, #userArray2").on('change keyup paste', function() {

        var input = $("input").map(function(){return $(this).val().toLowerCase();}).get();

        $('#listArray span').each(function(){

            if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
            $(this).addClass('active');
            }
          else
            $(this).removeClass('active');
        });
    });

原因：在您的代码中，您一次只能获得单个值进行比较，而不是两个文本框的值!!!

同时突出显示来自多个输入字段的单词

2 个答案: