Javascript 输入与部分内容匹配的完整日历的文本筛选器

我试图使文本字段充当包含完整日历的页面上的过滤器

它已经可以正常工作了，但是它只根据精确的内容匹配过滤日历事件中的事件。我的意思是，例如，如果我在一个事件选项中搜索，该选项包含带有该输入字段的数字，我需要输入完整的数字才能找到它

例如： 如果我想找到带有“event.number=95011”的事件，我必须输入“95011”才能找到它。如果我输入“95”，它将不会显示enter，即使它包含这些数字作为完整“数字”的一部分

我希望它根据搜索字段中的内容过滤事件，而不需要输入全部信息。它的一部分应该可以工作，就像大多数搜索过滤器通常可以工作一样

以下是我的完整日历部分代码：

   $('#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'
        },
      ],
    });

因此，魔术发生的部分在“eventRender”部分，这里是结尾的“return”部分：

  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;

  },

我需要做哪些更改以确保它也扫描部分匹配，而不仅仅是显示与内容100%匹配的事件

我试过：

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

但它打破了剧本，没有任何效果

英语不是我的主要语言，所以我很难解释我的情况，但希望你能理解我的问题

非常感谢

也许吧

(
   $('#numero').val().trim() === ''
   || event.numero.indexOf($('#numero').val()) > -1
)

---

您正在执行的索引是在数组上，而不是在数组中的每个元素上，因此它只能在完全匹配的情况下找到它。如果要查找字符串中的值，必须直接查找。

我不知道这是否是您想要的，但我是这样做的：

eventRender: function(info) { 
    $(info.el).tooltip({
      title: info.event.title,
    });
    $(info.el).bind('dblclick', function() {
     alert('double click!');
    });
    var search = document.getElementById("SearchInput").value;
    if (search.length > 0){ 
      //return ['', info.event.title].indexOf(search) > -1
      return info.event.title.indexOf(search) > -1
    }else{
      return ['all', info.event.groupId].indexOf($('#bandera2').val()) >= 0
    }        
  }

我输入了一个将过滤标题的内容

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

---

如果“源”是日历中的所有事件，则将其发送到函数以刷新此事件。

完成TAPLAR的回答后，代码如下所示：

eventRender: function(info) { 
    $(info.el).tooltip({
      title: info.event.title,
    });
    $(info.el).bind('dblclick', function() {
     alert('double click!');
    });
    var search = document.getElementById("SearchInput").value;
    if (search.length > 0){ 
      //return ['', info.event.title].indexOf(search) > -1
      return info.event.title.indexOf(search) > -1
    }else{
      return ['all', info.event.groupId].indexOf($('#bandera2').val()) >= 0
    }        
  }

---

那太好了！非常感谢你。现在我明白是怎么回事了。再次感谢塔普拉

 $("#searchInput").keyup(function(){
        var input = this.value;
        var newSource = source.filter(elem => 
         (elem.title.toLowerCase().indexOf(input.toLowerCase()) > -1) );
        refreshCalendar(newSource)

    });
 function refreshCalendar(newSource) {
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('addEventSource', newSource);
        $('#calendar').fullCalendar('refetchEvents');
    }

eventRender: function(info) { 
    $(info.el).tooltip({
      title: info.event.title,
    });
    $(info.el).bind('dblclick', function() {
     alert('double click!');
    });
    var search = document.getElementById("SearchInput").value;
    if (search.length > 0){ 
      //return ['', info.event.title].indexOf(search) > -1
      return info.event.title.indexOf(search) > -1
    }else{
      return ['all', info.event.groupId].indexOf($('#bandera2').val()) >= 0
    }        
  }