Javascript 提交输入字段提交后进行筛选

我有输入字段和提交按钮…当我在输入字段中输入一些文本时，它在我提交之前开始过滤（输入提交按钮）。我怎样才能纠正这一点

我想在单击提交按钮后进行筛选。

$（函数（）{
var$grid=$（“#容器”）；
$grid.同位素（{itemSelector:'.item'}）；
var filters=[]；//所有过滤器选项的方便存储区，
//这样我们就不必每次都在DOM中查找它们。
//（全局数组可能不是最优雅的
//您可以处理此问题的方法，但您已经了解了。）
//搜索事件处理程序
$（'.quicksearch'）。在（'keyup'，function（）上{
//为了简洁起见，debounce被移除了，但你应该把它放在这里
过滤器[0]=此值；
runFilter（）；
});
$（“#筛选选择”）。在（'change'，function（）上{
过滤器[1]=此值；
runFilter（）；
});
//等等，如果需要更多的过滤器
//过滤器本身
var runFilter=函数（）{
$grid.com({
过滤器：函数（）{
如果（筛选器[0]）{
//至少输入了一些搜索文本：
var qsRegex=new RegExp（过滤器[0]，'gi'）；
//如果标题不匹配，请将其删除：
if（！$（this）.find（'.content title'）.text（）.match（qsRegex））{
返回false；
}
}
if（过滤器[1]）{
//已选择一个类别；筛选出其他类别：
if（！（$（this）.hasClass（过滤器[1]））{
返回false；
}
}
//等等，用于任何其他过滤器
//已成功通过所有条件，因此：
返回true；
}
});
}
});

---

在代码中有一个

键控事件。此事件类型意味着每次按下键盘上的一个键（并释放——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'
表示按下并释放键盘键

因此，您有“当用户选择quicksearch并键入一个字母，然后运行该函数时”。您需要将其更改为“当用户单击按钮时，然后运行该功能”

您可以使用按钮或类的ID

如果你想也能按回车键
您可以在enter键上查找keyup（与上面的操作类似）。您可以将这两个块都添加到代码中

您需要使用
函数（e）
将事件信息传递给函数。然后你可以做一个条件检查，看看被按下和释放的键是否是“回车”键，也就是
13
-->
if（e.key==13）


基于codepen代码的更新
您的代码笔代码中有几个错误。您尝试应用筛选器，但没有获取要应用的搜索框值。然后你忘了把搜索参数传给同位素函数

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

您可以通过将quicksearch操作替换为：

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

您的代码正在使用
$（'.quicksearch'）运行。在（'keyup'，function（）{
每次键入一个字母时。您将希望在单击按钮时将其更改为。因此，请使用类似于
$（'.Your button class'）。在（'click'，function（）上）{
instead.yup！…我明白你的意思…但是我不知道怎么做…所以请你给我一些演示。好的，我在下面给了你一个细分。因为你想要enter键和按钮，我给了你如何只为enter键执行keyup事件（这可能是你以前尝试过的）.这很简单，你现在就知道怎么做了：）你特别问了如何点击按钮，但你也说了谈论回车键。这里我做了你所说的，但它不起作用……请你试试这有什么问题。我看了一下，并解决了它。另外，你不再需要谴责，因为你不会在更改时使用，而是在点击时使用。
// 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);
     }
});