Выделите слова из нескольких полей ввода одновременно

У меня проблема, над которой я работаю, моя программа выделяет слова, если они введены в поле ввода. Он не будет выделять слова обоих. (Пример Input1 type «Test1», Input2 type «Test2») есть ли способ сохранить выделенные слова активными из одного поля, когда пользователь переключится на другой?Выделите слова из нескольких полей ввода одновременно

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>

источник

2016-08-22 Pyreal

Вы можете достичь желаемого эффекта путем удаления активного класса всякий раз, когда изменения текста, а затем проверить на обоих входах:

$("#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'); 
 
     } 
 
    }); 
 
    }); 
 
});

#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; 
 
}

<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">

источник

2016-08-22 21:39:30 Calum

Работает отлично, спасибо за помощь. – Pyreal

Try этот код:

$("#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'); 
     }); 
    });

Причина:: В вашем коде вы получаете только одно значение за раз, чтобы сравнить, а также значения обоих текстовых полей !!!

источник

2016-08-22 21:49:38

Выделите слова из нескольких полей ввода одновременно

ответ

Смежные вопросы