Question

我正在尝试使用jquery和css构建“在显示的元素中搜索”功能。这是我到目前为止所得到的：

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

enter image description here

到目前为止，这是脚本：

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

Answer 1

我认为你只是让事情变得太复杂......你可以在几行中轻松完成。希望这会有所帮助：

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/

Answer 2

以下是jQuery自动完成so question的方法如果您想自己构建它，可以执行以下操作：
1.获取每个项目的数据 2.制作渲染功能，你将在火词中用“Fir”代替火焰 3.每次更改输入中的文本时，您都可以浏览项目并执行替换。

自动突出显示部分单词

2 个答案: