自动突出显示部分单词答案

【问题标题】：Auto highlighting part of word自动突出显示部分单词
【发布时间】：2013-07-31 15:06:09
【问题描述】：

我正在尝试使用 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'
});

【问题讨论】：

标签： javascript jquery string filter highlight

【解决方案1】：

这是使用 jQuery 自动完成的方法so question
如果您想自己构建它，您可以执行以下操作：
1.获取每一项的数据。
2. 制作渲染函数，您将在其中将 Fire 单词中的“Fir”替换为 Fire
3.每次更改输入中的文本时，您都可以遍历项目并执行替换。

【讨论】：

【解决方案2】：

我认为你只是把事情复杂化了......你可以用几行轻松地做到这一点。希望这会有所帮助：

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

我使用了hide 和show，因为它感觉更快，但您可以像以前一样使用 CSS3 动画和类。

演示： http://jsfiddle.net/elclanrs/wTjzc/8/

【讨论】：

谢谢，正是我需要的。