提交 Input Field 提交后过滤

Question

我有输入字段和提交按钮....当我在输入字段中输入一些文本时，它在我提交之前开始过滤（输入提交按钮）。我该如何纠正。

我想在点击提交按钮后进行过滤。

$(function() {

    var $grid = $('#container');
    $grid.isotope({itemSelector: '.item'});

    var filters = []; // A convenient bucket for all the filter options, 
                      // just so we don't have to look them up in the DOM every time.
                      // (a global array is maybe sort of not the most elegant 
                      // way you could deal with this but you get the idea.)

    // Search event handlers
    $('.quicksearch').on('keyup', function() {
        // debounce removed for brevity, but you'd put it here
        filters[0] = this.value;
        runFilter();
    });
    $('#filter-select').on('change', function() {
        filters[1] = this.value;
        runFilter();
    });
    // and so on if more filters needed

    // The filter itself
    var runFilter = function() {
        $grid.isotope({
            filter: function() {
                if (filters[0]) {
                    // at least some search text was entered:
                    var qsRegex = new RegExp(filters[0], 'gi');

                    // if the title doesn't match, eliminate it:
                    if (!$(this).find('.content-title').text().match(qsRegex)) {
                        return false;
                    }
                }

                if (filters[1]) {
                    // a category was selected; filter out others:
                    if (!($(this).hasClass(filters[1]))) {
                        return false;
                    }
                }

                // etcetera, for any other filters 

                // successfully passed all conditions, so:
                return true;
            }
        });
    }
});

Answer 1

在您的代码中，您有一个 keyup 事件。这种事件类型意味着每次按下键盘上的一个键（并释放——keyup部分），都会调用一个函数。

您的代码：

// Search event handlers
    $('.quicksearch').on('keyup', function() {
        // debounce removed for brevity, but you'd put it here
        filters[0] = this.value;
        runFilter();
    });

$('.quicksearch') 表示当一个元素具有快速搜索类...

.on 表示事件发生时

'keyup' 表示按下和释放键盘键时

所以你有“当用户选择了快速搜索并且他们输入一个字母然后运行该功能”。您需要将其更改为“当用户单击按钮然后运行该功能时”。

// Search event handlers when button is pushed
    $('#id-of-your-button').on('click', function() {
        filters[0] = this.value;
        runFilter();
    });

你可以使用按钮或类的ID

如果你想也可以按回车

您可以在 enter 键上查找 keyup（类似于您在上面所做的）。您可以将这两个块都添加到您的代码中。

您需要使用function(e) 将事件信息传递给您的函数。然后你可以做一个条件检查，看看被按下和释放的键是否是“输入”键——即13 --> if(e.key === 13)

// Search when someone pushes enter in the text field
$(".quicksearch").keyup(function(e){ 
      // Check if the enter key was hit
      if(e.key === 13) {
            filters[0] = this.value;
            runFilter();
    }
});

// Search event handlers when button is pushed
$('#id-of-your-button').on('click', function() {
    filters[0] = this.value;
    runFilter();
});

---

基于codepen代码更新

您的 codepen 代码中有几个错误。您尝试应用过滤器，但没有抓住搜索框的值来应用。然后您忘记将搜索参数传递给同位素函数。

您可以通过将您的快速搜索操作替换为：

// use value of search field to filter
var $quicksearch = $('.bttn').on( 'click',function() {

    qsRegex = new RegExp( document.getElementById('quicksearch').value, 'gi' );
  $grid.isotope(qsRegex);
});

在您的代码中，您使用 $quicksearch.val()，但您将变量 $quicksearch 分配为按钮。

您的 codepen 中 javascript 的完整（更正）代码如下：

// quick search regex
var qsRegex;
var buttonFilter;

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
    var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
    return searchResult && buttonResult;
  }  
});

// bind filter on select change
$('.filters-select').on( 'change', function() {
  // get filter value from option value
  // var filterValue = this.value;
  // use filterFn if matches value
  buttonFilter = this.value;
  //$grid.isotope({ filter: filterValue });
  $grid.isotope();
});

// bind filter on select change
$('.filters-select2').on( 'change', function() {
  // get filter value from option value
  // var filterValue = this.value;
  // use filterFn if matches value
  buttonFilter = this.value;
  //$grid.isotope({ filter: filterValue });
  $grid.isotope();
});

// use value of search field to filter
var $quicksearch = $('.bttn').on( 'click',function() {

    qsRegex = new RegExp( document.getElementById('quicksearch').value, 'gi' );
  $grid.isotope(qsRegex);
});

// Search when someone pushes enter in the text field
$("#quicksearch").keyup(function(e){ 
     if(e.key === 16 || e.key === 13 || e.key === 'Enter') {
qsRegex = new RegExp( document.getElementById('quicksearch').value, 'gi' );
  $grid.isotope(qsRegex);
     }
});