Подгонка событий с помощью FullCalendar и поля ввода

Question

Я пытаюсь отфильтровать события из своего календаря, используя скрипт FullCalendar, используя текстовое поле. Мне удалось заставить его работать с выпадающим меню, основанным на других темах Stackoverflow, но я не смог найти одно, фильтрующее события по ключевым словам в текстовом поле.

Вот код, который я добавил для работы раскрывающегося фильтра:

Это, чтобы перерисовать события при изменении.

$('#filter-conferencier').on('change', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });

И это для опций FullCalendar:

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listMonth, month,agendaWeek,agendaDay'
      },
      defaultView: 'listMonth',
      locale: 'fr',
      contentHeight: 600,
      navLinks: true,
      selectable: false,
      eventRender: function(event) { 
          return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0;
      },
...

Посмотрите на часть "eventRender". Вот как я заставляю его работать, чтобы фильтровать события на основе того, что выбрано в этом выпадающем меню. И это работает.

Чтобы также фильтровать контент на основе того, что находится внутри этого текстового ввода:

<input type="text" id="numero">

Я начал с добавления этого кода:

$('#numero').on('input', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });

И вот, вот где я потерян. Я попытался изменить код части eventRender следующим образом:

return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 && [event.numero].($('#numero').val());

Что не работает. Я думал, что это проверит «event.numero» каждого события и сделает его совпадающим со значением того, что находится внутри поля ввода «Numberro». Я не был уверен, что это сработает, и это не так.

Вот полный код "FullCalendar" с примерами данных.

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listMonth, month,agendaWeek,agendaDay'
      },
      defaultView: 'listMonth',
      locale: 'fr',
      contentHeight: 600,
      navLinks: true, // can click day/week names to navigate views
      selectable: false,
      eventRender: function(event, element, view) { 
        element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
        element.find('.fc-title').append("<br/>" + event.lieu); 
        element.find('.fc-list-item-title').append("<br/>" + event.lieu); 
        element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>"); 
          return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0;

      },
      selectHelper: true,
      editable: false,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'Example',
          start: '2018-05-05',
          end: '2018-05-06',
          color: '#ff0000',
          lieu: 'Montreal',
          numero: '300445',
          conferencier: 'John Doe',
          photoconferencier: 'http://www.example.com/img/profile.jpg',
          lienconferencier: 'http://www.example.com/profile/link.html',
          url: 'http://www.google.com'
        },
{
          title: 'Example2',
          start: '2018-05-08',
          end: '2018-05-010',
          color: '#ff0000',
          lieu: 'New York',
          numero: '300446',
          conferencier: 'Steve Jobs',
          photoconferencier: 'http://www.example.com/img/profile2.jpg',
          lienconferencier: 'http://www.example.com/profile/link2.html',
          url: 'http://www.apple.com'
        },
      ],
    });

Раскрывающееся меню и код текстового поля:

<select id="filter-conferencier">
<option value="all">Conférencier...</option>
<option value="john-doe">John Doe</option>
<option value="steve-jobs">Steve Jobs</option>
</select>

<input type="text" id="numero" placeholder="Numéro de contrat">

(части "element.find" предназначены для добавления визуальных элементов в представление listMonth)

Есть идеи, что мне нужно изменить, чтобы эта работа работала?

Большое спасибо!

Answer 1

Вы были недалеко, вам просто нужно было:

1) использовать indexOf () - без этого есть синтаксическая ошибка

2) справиться с условием, когда поле пусто, добавив дополнительное значение в массив

3) проверить, что indexOf возвращает значение 0 или более

На самом деле он практически идентичен исходной версии с использованием выпадающего списка - вы все еще просто проверяете значение из поля ввода. Единственные реальные различия - это имя поля ввода и дополнительное значение, используемое для указания того, что фильтр не применяется.

Я добавил несколько лишних пробелов в код, чтобы вы могли легче увидеть сходство структуры между двумя тестами:

return 
   ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 
&& [''   , event.numero      ].indexOf($('#numero').val()             ) >= 0;

См. http://jsfiddle.net/sbxpv25p/573/ для рабочего демо.