如果您还想按Enter键

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事件。这种事件类型意味着每次按下（释放）键盘上的某个键时，都会调用一个函数。

您的代码：

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

$('.quicksearch')表示当元素与类quicksearch ...

.on表示事件发生的时间

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

因此，您具有“当用户选择了快速搜索并键入字母然后运行该功能时”。您需要将其更改为“当用户单击按钮然后运行功能时”。

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

您可以使用按钮的ID或类

如果您还想按Enter键

您可以在回车键上查找快捷键（类似于上面的操作）。您只需将这两个块都添加到代码中即可。

您需要使用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代码中有几个错误。您尝试应用过滤器，但没有获取要应用的搜索框的值。然后您忘记将搜索参数传递给同位素函数。

您可以通过将快速搜索操作替换为以下内容来解决此问题：

// 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分配为按钮。

您的代笔中的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);
     }
});

提交后过滤输入字段提交

1 个答案:

如果您还想按Enter键

基于代码笔代码更新