Фильтр после отправки поля ввода

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

Вы можете использовать идентификатор кнопки или класса

если вы хотите также иметь возможность нажать 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();
});

---

update на основе кода codepen

В коде codepen произошла пара ошибок. Вы пытаетесь применить фильтр, но не получаете значение окна поиска для применения. И затем вы забудете передать этот параметр поиска в функцию изотопа.

Это можно исправить, заменив действие 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);
     }
});