3

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

http://jsfiddle.net/jonigiuro/wTjzc/

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

在此处输入图像描述

这是到目前为止的脚本：

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

2 回答 2

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

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

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

于 2013-07-31T08:05:01.617 回答
0

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

于 2013-07-31T07:55:13.287 回答