Javascript 自动突出显示单词的一部分

我正试图用jquery和css构建一个“在显示的元素中搜索”函数。 以下是我目前得到的信息：

现在我需要添加一个小功能，我不知道从哪里开始。基本上，当你在搜索栏中写东西时，相应的字母应该在列表中突出显示（参见屏幕截图，蓝色突出显示部分）

以下是目前为止的脚本：

var FilterParticipants = function(options) {
    this.options = options;
    this.participantList = [];

    this.init = function() {

        var self = this;
        //GENERATE PARTICIPANTS OPBJECT
        for(var i = 0; i < this.options.participantBox.length ; i++) {
            this.participantList.push({
                element: this.options.participantBox.eq(i),
                name: this.options.participantBox.eq(i).find('.name').text().toLowerCase()
            })
        }
        //ADD EVENT LISTENER
        this.options.searchField.on('keyup', function() {
            self.filter($(this).val());

        })
    }

    this.filter = function( string ) {
        var list = this.participantList;
        for(var i = 0 ; i < this.participantList.length; i++) {
            var currentItem = list[i];
            //COMPARE THE INPUT WITH THE PARTICIPANTS OBJECT (NAME)
            if( currentItem.name.indexOf(string.toLowerCase()) == -1) {
                 currentItem.element.addClass('hidden');
             } else {
                 currentItem.element.removeClass('hidden');
             }
         }
    }

    this.init();
}

var filterParticipants = new FilterParticipants({
    searchField: $('#participants-field'),
    participantBox: $('.single_participant'),
    nameClass: 'name'
});

var FilterParticipants=函数（选项）{
this.options=选项；
this.participantList=[]；
this.init=函数（）{
var self=这个；
//生成参与者对象
for（var i=0；i

以下是使用jQuery自动完成的方法
如果您想自己构建它，可以执行以下操作：
1.获取每个项目的数据。
2.制作渲染函数，在该函数中，您可以将Fire word中的say“Fir”替换为Fire

---

3.每次您更改输入中的文本时，您都可以浏览项目并执行替换。

我认为您只是让事情变得太复杂了。。。你可以用几行代码轻松地完成这项工作。希望这有助于：

var $search = $('#participants-field');
var $names = $('.single_participant p');

$search.keyup(function(){
  var match = RegExp(this.value, 'gi'); // case-insensitive
  $names
    .hide()
    .filter(function(){ return match.test($(this).text()) })
    .show()
    .html(function(){
      if (!$search.val()) return $(this).text();
      return $(this).text().replace(match, '<span class="highlight">$&</span>');
    });
});

var$search=$（“#参与者字段”）；
变量$names=$（'.single_participant p'）；
$search.keyup（函数（）{
var match=RegExp（this.value，'gi'）；//不区分大小写
$names
.hide（）
.filter（函数（）{return match.test（$（this）.text（））}）
.show（）
.html（函数（）{
如果（！$search.val（））返回$（this.text（）；
返回$（this）.text（）.replace（匹配，$&'）；
});
});

我使用了

hide

和

show

，因为它感觉更快速，但你可以像以前那样使用CSS3动画和类

---

演示：

谢谢，这正是我需要的。