Question

我正在实时搜索一个网站，它的工作正常，但是我似乎无法弄清楚如何在结果中突出显示搜索词。以下是我的JS代码。我假设我需要编辑data-search-term变量，但是对于如何使用它一无所知。

我只知道HTML / CSS。没有JavaScript。

jQuery(document).ready(function($) {

    $('.training-search-list li').each(function() {
        $(this).attr('data-search-term', $(this).text().toLowerCase());
    });

    $('.training-search-box').on('keyup', function() {

        var searchTerm = $(this).val().toLowerCase();

        $('.training-search-list li').each(function() {

            if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
                $(this).show();
            } else {
                $(this).hide();
            }

        });

    });

});

谢谢。

Answer 1

我很久以前做到了

    (function($){

  $('#categoryFilter').focus().keyup(function(event){
    var input = $(this);
    var val = input.val();
    if(val == ''){
      $('#filter li').show();
      $('#filter a span').removeClass('highlighted');
      return true;
    }
    var regexp = '\\b(.*)';
    for (var i in val) {
      regexp += '('+val[i]+')(.*)';
    }
    regexp += '\\b';
    $('#filter li').show();
    $('#filter').find('a > span').each(function(){
      var span = $(this);
      var resultats = span.text().match(new RegExp(regexp,'i'));
      if(resultats){
        var string = '';
        for (var i in resultats){
          if(i > 0){
            if(i%2 == 0){
              string += '<span class="highlighted">'+resultats[i]+'</span>';
            }else {
                string += resultats[i];
            }
          }
        }
        span.empty().append(string);
      }else {
        span.parent().parent().hide();
      }
    });
  });
})(jQuery);

也许您可以尝试使用自己的代码制作自己的代码

如何在JS中编辑JavaScript变量的CSS？

1 个答案: