I am trying to make a text field act as a filter on a page containing a FullCalendar calendar.

It's already working fine, but it only filters the events of the calendar events based on exact content match. By that, I mean that if for example I am searching inside one of the event option that contains numbers with that input field, I need to enter the full number to find it.

Example:
If I want to find the event with "event.number = 95011", I would have to enter "95011" to find it. If I enter "95", it will not display the enter even if it contains these numbers as part of the full "number".

I want it to filter the events based on what is in that search field, and not needing to enter the entire information. Part of it should work, like most search filters usually work.

Here's my code for the FullCalendar part:

```
   $('#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.status].indexOf($('#filter-status').val()) >= 0 &&
             ['all', event.client].indexOf($('#filter-contact').val()) >= 0 && 
             ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
             ['', event.numero].indexOf($('#numero').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'
        },
      ],
    });

```

I also have added this bit to filter the content based on what is selected or entered in the filter options (there's dropdown menus too, but my issue is with the text input fields):

```
  $('#filter-conferencier').on('change', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });
  $('#filter-contact').on('change', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });
  $('#filter-status').on('change', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });
  $('#numero').on('input', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        });

```

So the part where the magic happens is in the "eventRender" section, here, in the "return" part at the end:

```
  eventRender: function(event, element) { 

    // Client
     element.find('.fc-list-item-title').append("<a href='" + event.lienclient + "'><div class='contact-calendrier-container'><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Client</strong><br>" + event.client + "</div></a>"); 

    // Conférencier
    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>"); 
      if (event.status == "Annulé") {
                element.css('backgroundImage', 'url(<cms:show k_site_link />images/pattern-web.jpg)');
                element.css('opacity', '0.8');
                element.find('.fc-list-item-title').append("<span class='status-badge-annule'>Annulé</span>"); 
            }
      if (event.status == "Accepté et actif") {
                element.find('.fc-list-item-title').append("<span class='status-badge-actif'>Actif</span>"); 
            }
      if (event.status == "En attente") {
                element.find('.fc-list-item-title').append("<span class='status-badge-attente'>En attente</span>"); 
            }                       
      return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
             ['all', event.client].indexOf($('#filter-contact').val()) >= 0 && 
             ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
             ['', event.numero].indexOf($('#numero').val()) >= 0;

  },

```

This is the line handling the "numero" filter field:

```
['', event.numero].indexOf($('#numero').val()) >= 0;

```

What do I need to change to make sure it scans for partial match too, not just show events that 100% match the content of it?

I tried:

```
['', event.numero].indexOf($('#numero').includes($('#numero').val())) >= 0;

```

But it broke the script and nothing was working or showing.

English is not my main language, so it's hard for me to explain my situation, but hopefully you will understand my issue here.

Thank you very much