Markieren Sie Wörter aus mehreren Eingabefeldern gleichzeitig

Ich habe ein Problem, an dem ich arbeite, mein Programm wird Wörter markieren, wenn in ein Eingabefeld eingegeben. Wörter aus beiden werden nicht hervorgehoben (Beispiel Eingabe1 Typ "Test1", Eingabe2 Typ "Test2") Gibt es eine Möglichkeit, die markierten Wörter von einem Feld aus aktiv zu halten, wenn der Benutzer zu einem anderen wechselt?Markieren Sie Wörter aus mehreren Eingabefeldern gleichzeitig

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>

Quelle

2016-08-22 Pyreal

Sie können den gewünschten Effekt erzielen, indem die aktive Klasse, wenn die Textänderungen zu entfernen und dann gegen beide Eingänge Überprüfung:

$("#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">

Quelle

2016-08-22 21:39:30 Calum

Funktioniert perfekt, danke für die Hilfe. – Pyreal

Try Dieser Code:

Grund: In Ihrem Code erhalten Sie nur Einzelwert zu einem Zeitpunkt zu vergleichen, eher die beiden Textfeld Werte !!!

Quelle

2016-08-22 21:49:38

Markieren Sie Wörter aus mehreren Eingabefeldern gleichzeitig

Antwort

Verwandte Themen