Javascript 使用FullCalendar和输入字段设置事件

我正在尝试使用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">

现在，这就是我迷路的地方。 我尝试如下更改eventRender部分的代码：

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

这不管用。我认为这将检查每个事件的event.numero，并使其与numero输入字段中的值匹配。我不相信它会起作用，但事实并非如此

下面是完整的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视图添加可视内容

你知道我需要改变什么才能让这一切顺利吗

---

非常感谢

你并不遥远，你只需要：

1使用indexOf-如果没有它，则会出现语法错误

2通过向数组中添加额外值来处理字段为空的情况

3检查indexOf是否返回0或更大的值

使用下拉列表，它实际上与您的原始版本几乎相同-您仍然只是在检查输入字段中的值。唯一真正的区别是输入字段的名称，以及用于指示未应用任何筛选器的额外值

我在这里的代码中添加了一些额外的空格，这样您就可以更容易地看到两个测试之间的结构相似性：

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

---

请参阅以获得一个有效的演示。

如果看不到您尝试筛选的数据示例、您使用的筛选输入以及样本数据和输入的预期结果，这有点困难。谢谢，我已经添加了FullCalendar部分的完整代码和1个示例事件数据。那么在每种情况下，示例输入和预期结果如何，以演示问题？多个事件作为示例数据可能更好，以便更清楚地看到效果。只添加了第二个示例事件，以及下拉菜单和文本字段的html代码。谢谢上面的示例不适用于下拉列表，即使下拉选项中的值与事件对象不匹配-我不得不稍微更改它：这是greaet！谢谢。检查event.numero是否包含而不是精确匹配？那会有很大不同吗？我想我忘了添加那个信息了。因此，如果您输入特定事件的event.numero的一部分，它仍将显示，而不必精确匹配。示例：如果代码为5605，并且输入56，则应显示该代码。谢谢如果只想匹配字符串的一部分，可能需要对numero字段本身使用类似的内容，而不是使用这种基于数组的语法。本质上，您是在另一个字符串中查找字符串的一部分。是的，你忘了在问题中包括这一点。如果你不明白，你可以在这个问题之后再问一次。这似乎不是一个完整的日历问题，它完全集中在字符串匹配上。数据来自何处无关紧要。好的，非常感谢！帮了我很多忙。我将努力使它与包括工作。再次感谢！

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