Question

Meteor客户端代码通过模板keyup事件接收用户输入的实时输入。

在页面上有列表项，每个列表项都包含文本。我需要在任何与用户输入内容相匹配的列表项中对文本部分应用样式我的尝试根本没有应用任何样式。

怎么做？感谢

'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

更新

对于需要使用RegExp的变量，您的函数也会在每个字符组周围添加一个span，这会在从第五个字母替换时失败，因此您需要清除该部分同样，删除字符时没有提及。

＆＃13;

// 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;
  
})

＆＃13;

.myCSS {
  color: red
}

＆＃13;

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

＆＃13;

在列表项上实时样式化文本的一部分以匹配用户输入

1 个答案: