Live-Styling-Teil des Texts auf Listenelementen zur Übereinstimmung mit Benutzereingaben

Question

Ein Meteor-Client-Code empfängt eine Live-Eingabe vom Benutzer, wie er über die Vorlage keyup in ein Eingabefeld eingegeben wird.

Auf der Seite gibt es Listenelemente mit Text in jedem. Ich muss einen Stil auf den Teil des Textes in einem der Listenelemente anwenden, der dem entspricht, was der Benutzer eintippt.
Mein Versuch ist überhaupt kein Styling.

Wie kann es gemacht werden?

Dank

'keyup .check-filter': function(event) { 
    showMatches(event.target.value); 
} 

showMatches: (userInput) => { 
    if (userInput.length > 3) { 
    //this is not doing the job for me. 
    $('li').html($('li').html().replace('/' + userInput + '/gi', '<span class="myCSS">' + $1 + '< /span>')); 
    } 
} 

Answer 1

Aktualisiert

Für Variablen, die Sie benötigen RegExp zu verwenden, auch Ihre Funktion eine span um jede Zeichengruppe hinzufügen, die es nicht machen, wenn sie aus dem fünften Buchstaben ersetzen, so müssen Sie um diesen Teil auch zu löschen, nicht erwähnt beim Löschen von Zeichen.

// global, app specific, variables 
 
var myApp = { 
 
    userInput : { 
 
    firstTime : true, 
 
    lastValue : "" 
 
    } 
 
}; 
 

 
document.querySelector('input').addEventListener('input', function(e) { 
 
    var userInput = e.target.value; 
 
    
 
    if (userInput.length > 3 || !myApp.userInput.firstTime) { 
 
    if (!myApp.userInput.firstTime) { 
 
     var re = new RegExp('<span class="myCSS">' + 
 
          myApp.userInput.lastValue + 
 
          '</span>','gi'); 
 

 
     $("li").each(function(index) { 
 
     $(this).html($(this).html().replace(re, myApp.userInput.lastValue)); 
 
     }); 
 

 
    } 
 

 
    myApp.userInput.firstTime = false; 
 
    var re = new RegExp(userInput,'gi');  
 

 
    $("li").each(function(index) { 
 
     $(this).html($(this).html().replace(re, '<span class="myCSS">' + userInput + '</span>'));  
 
    }); 
 

 
    } 
 
    myApp.userInput.lastValue = userInput; 
 
    
 
})

.myCSS { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li>Hello there, there is 2 or more word duplicates in here</li> 
 
    <li>This has 2 or more words as well, but is a completely different sentence</li> 
 
</ul> 
 

 
Test input: <input type="text"/>